React和Vue中监听变量变化的⽅法
React 中
本地调试React代码的⽅法
yarn build
场景
假设有这样⼀个场景，⽗组件传递⼦组件⼀个A参数，⼦组件需要监听A参数的变化转换为state。
16之前
在React以前我们可以使⽤ componentWillReveiveProps 来监听 props 的变换
16之后
在最新版本的React中可以使⽤新出的 getDerivedStateFromProps 进⾏props的监听， getDerivedStateFromProps 可以返回 null 或者⼀个对象，如果是对象，则会更新 state
getDerivedStateFromProps触发条件
我们的⽬标就是到 getDerivedStateFromProps 的触发条件
我们知道，只要调⽤ setState 就会触发 getDerivedStateFromProps ，并且 props 的值相同，也会触发 getDerivedStateFromProps (16.3版本之后)
setState 在 react.development.js 当中
Component.prototype.setState = function (partialState, callback) {
!(typeof partialState === 'object' || typeof partialState === 'function' || partialState == null) ? invariant(false, 'setState(...): takes an object of state variables to update or a function which returns an object of state variables.') : void 0;
queueSetState(this, partialState, callback, 'setState');
};
ReactNoopUpdateQueue {
//...部分省略
enqueueSetState: function (publicInstance, partialState, callback, callerName) {
warnNoop(publicInstance, 'setState');
}
}
执⾏的是⼀个警告⽅法
function warnNoop(publicInstance, callerName) {
{
// 实例的构造体
var _constructor = structor;
var componentName = _constructor && (_constructor.displayName || _constructor.name) || 'ReactClass';
// 组成⼀个key 组件名称+⽅法名（列如setState）
var warningKey = componentName + '.' + callerName;
// 如果已经输出过警告了就不会再输出
if (didWarnStateUpdateForUnmountedComponent[warningKey]) {
return;
}
// 在开发者⼯具的终端⾥输出警告⽇志不能直接使⽤ component.setState来调⽤
warningWithoutStack$1(false, "Can't call %s on a component that is not yet mounted. " + 'This is a no-op, but it might indicate a bug in your application. ' + 'Instead, assign to `this.state` directly or define a `state = {};` ' + 'class property with the desired state in  didWarnStateUpdateForUnmountedComponent[warningKey] = true;
}
}
看来 ReactNoopUpdateQueue 是⼀个抽象类，实际的⽅法并不是在这⾥实现的，同时我们看下最初 updater 赋值的地⽅，初始化 Component 时，会传⼊实际的 updater
function Component(props, context, updater) {
this.props = props;
// If a component has string refs, we will assign a different object later.
// We initialize the default updater but the real one gets injected by the
// renderer.
this.updater = updater || ReactNoopUpdateQueue;
}
我们在组件的构造⽅法当中将 this 进⾏打印
class App extends Component {
constructor(props) {
super(props);
//..省略
console.log('constructor', this);
}
}
⽅法指向的是，在react-dom.development.js 的classComponentUpdater
var classComponentUpdater = {
// 是否渲染
isMounted: isMounted,
enqueueSetState: function(inst, payload, callback) {
// inst 是fiber
inst = inst._reactInternalFiber;
// 获取时间
var currentTime = requestCurrentTime();
currentTime = computeExpirationForFiber(currentTime, inst);
// 根据更新时间初始化⼀个标识对象
var update = createUpdate(currentTime);
update.payload = payload;
void 0 !== callback && null !== callback && (update.callback = callback);
// 排队更新将更新任务加⼊队列当中
enqueueUpdate(inst, update);
//
scheduleWork(inst, currentTime);
},
// ..省略
}
enqueueUpdate
就是将更新任务加⼊队列当中
function enqueueUpdate(fiber, update) {
var alternate = fiber.alternate;
// 如果alternat为空并且更新队列为空则创建更新队列
if (null === alternate) {
var queue1 = fiber.updateQueue;
var queue2 = null;
null === queue1 &&
(queue1 = fiber.updateQueue = izedState));
(queue1 = fiber.updateQueue),
(queue2 = alternate.updateQueue),
null === queue1
null === queue2
((queue1 = fiber.updateQueue = createUpdateQueue(
)
),
(queue2 = alternate.updateQueue = createUpdateQueue(
)))
: (queue1 = fiber.updateQueue = cloneUpdateQueue(queue2))
: null === queue2 &&
(queue2 = alternate.updateQueue = cloneUpdateQueue(queue1));
null === queue2 || queue1 === queue2
appendUpdateToQueue(queue1, update)
: null === queue1.lastUpdate || null === queue2.lastUpdate
(appendUpdateToQueue(queue1, update),
appendUpdateToQueue(queue2, update))
: (appendUpdateToQueue(queue1, update), (queue2.lastUpdate = update));
}
我们看scheduleWork下
function scheduleWork(fiber, expirationTime) {
// 获取根 node
var root = scheduleWorkToRoot(fiber, expirationTime);
null !== root &&
(!isWorking &&
0 !== nextRenderExpirationTime &&
expirationTime < nextRenderExpirationTime &&
((interruptedBy = fiber), resetStack()),
markPendingPriorityLevel(root, expirationTime),
(isWorking && !isCommitting$1 && nextRoot === root) ||
requestWork(root, pirationTime),
nestedUpdateCount > NESTED_UPDATE_LIMIT &&
((nestedUpdateCount = 0), reactProdInvariant("185")));
}
function requestWork(root, expirationTime) {
// 将需要渲染的root进⾏记录
addRootToSchedule(root, expirationTime);
if (isRendering) {
/
/ Prevent reentrancy. Remaining work will be scheduled at the end of
// the currently rendering batch.
return;
}
if (isBatchingUpdates) {
// Flush work at the end of the batch.
if (isUnbatchingUpdates) {
// ...unless we're inside unbatchedUpdates, in which case we should
// flush it now.
nextFlushedRoot = root;
nextFlushedExpirationTime = Sync;
performWorkOnRoot(root, Sync, true);
}
// 执⾏到这边直接return，此时setState()这个过程已经结束
return;
}
// TODO: Get rid of Sync and use current time?
if (expirationTime === Sync) {
performSyncWork();
} else {
scheduleCallbackWithExpirationTime(root, expirationTime);
}
}
太过复杂，⼀些⽅法其实还没有看懂，但是根据断点可以把执⾏顺序先理⼀下，在 setState 之后会执⾏ performSyncWork ，随后是如下的⼀个执⾏顺序performSyncWork => performWorkOnRoot => renderRoot => workLoop => performUnitOfWork => beginWork => applyDerivedStateFromProps
最终⽅法是执⾏
function applyDerivedStateFromProps(
workInProgress,
ctor,
getDerivedStateFromProps,
nextProps
) {
var prevState = izedState;
{
if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && de & StrictMode) {
// Invoke the function an extra time to help detect side-effects.
getDerivedStateFromProps(nextProps, prevState);
}
}
// 获取改变的state
var partialState = getDerivedStateFromProps(nextProps, prevState);
{
// 对⼀些错误格式进⾏警告
warnOnUndefinedDerivedState(ctor, partialState);
} // Merge the partial state and the previous state.
// 判断getDerivedStateFromProps返回的格式是否为空，如果不为空则将由原的state和它的返回值合并
var memoizedState = partialState === null || partialState === undefined ? prevState : _assign({}, prevState, partialState);
// 设置state
// ⼀旦更新队列为空，将派⽣状态保留在基础状态当中
// base state.
var updateQueue = workInProgress.updateQueue;
if (updateQueue !== null && pirationTime === NoWork) {
updateQueue.baseState = memoizedState;
}
}
Vue
vue监听变量变化依靠的是 watch ，因此我们先从源码中看看， watch 是在哪⾥触发的。
Watch触发条件
在 src/core/instance 中有 initState()
/core/instance/state.js
在数据初始化时 initData() ，会将每vue的data注册到 objerserver 中
function initData (vm: Component) {
// ...省略部分代码
observe(data, true /* asRootData */)
}
/**
* Attempt to create an observer instance for a value,
* returns the new observer if successfully observed,
* or the existing observer if the value already has one.
*/
export function observe (value: any, asRootData: ?boolean): Observer | void {
if (!isObject(value) || value instanceof VNode) {
return
}
let ob: Observer | void
if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
ob = value.__ob__
} else if (
shouldObserve &&
!isServerRendering() &&
(Array.isArray(value) || isPlainObject(value)) &&
Object.isExtensible(value) &&
!value._isVue
) {
// 创建observer
ob = new Observer(value)
}
if (asRootData && ob) {
ob.vmCount++
}
return ob
}
来看下 observer 的构造⽅法，不管是array还是obj，他们最终都会调⽤的是 this.walk()
constructor (value: any) {
this.value = value
this.dep = new Dep()
this.vmCount = 0
def(value, '__ob__', this)
if (Array.isArray(value)) {
const augment = hasProto
protoAugment
: copyAugment
augment(value, arrayMethods, arrayKeys)
// 遍历array中的每个值，然后调⽤walk
this.observeArray(value)
} else {
this.walk(value)
}
}
我们再来看下walk⽅法，walk⽅法就是将object中的执⾏ defineReactive() ⽅法，⽽这个⽅法实际就是改写 set 和 get ⽅法
react router 和vue router/**
* Walk through each property and convert them into
* getter/setters. This method should only be called when
* value type is Object.
*/
walk (obj: Object) {
const keys = Object.keys(obj)
for (let i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i])
}
}
/core/observer/index.js
defineReactive ⽅法最为核⼼，它将set和get⽅法改写，如果我们重新对变量进⾏赋值，那么会判断变量的新值是否等于旧值，如果不相等，则会触发 ify() 从⽽回调watch中的⽅法。/**
* Define a reactive property on an Object.
*/
export function defineReactive (
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
// dep当中存放的是watcher数组
const dep = new Dep()
const property = OwnPropertyDescriptor(obj, key)
if (property && figurable === false) {
return
}
// cater for pre-defined getter/setters
const getter = property &&
const setter = property && property.set
if ((!getter || setter) && arguments.length === 2) {
// 如果第三个值没有传。那么val就直接从obj中根据key的值获取
val = obj[key]
}
let childOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
// 可设置值
configurable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
if (Dep.target) {
// dep中⽣成个watcher
dep.depend()
if (childOb) {
childOb.dep.depend()
if (Array.isArray(value)) {
dependArray(value)
}
}
}
return value
},
// 重点看set⽅法
set: function reactiveSetter (newVal) {
// 获取变量原始值
const value = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
// 进⾏重复值⽐较如果相等直接return
if (newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if (v.NODE_ENV !== 'production' && customSetter) {
// dev环境可以直接⾃定义set
customSetter()
}
// 将新的值赋值
setter.call(obj, newVal)
} else {
val = newVal
}
childOb = !shallow && observe(newVal)
// 触发watch事件
/
/ dep当中是⼀个wacher的数组
// notify会执⾏wacher数组的update⽅法，update⽅法触发最终的watcher的run⽅法，触发watch回调
}
})
}
⼩程序
⾃定义Watch
⼩程序的data本⾝是不⽀持watch的，但是我们可以⾃⾏添加，我们参照 Vue 的写法⾃⼰写⼀个。
watcher.js
export function defineReactive (obj, key, callbackObj, val) {
const property = OwnPropertyDescriptor(obj, key);
console.log(property);
const getter = property && ;
const setter = property && property.set;
val = obj[key]
const callback = callbackObj[key];
Object.defineProperty(obj, key, {
enumerable: true,
get: function reactiveGetter () {
const value = getter ? getter.call(obj) : val
return value
},
set: (newVal) => {
console.log('start set');
const value = getter ? getter.call(obj) : val
if (typeof callback === 'function') {
callback(newVal, val);
}
if (setter) {
setter.call(obj, newVal)
} else {
val = newVal
}
console.log('finish set', newVal);
}
});
}
export function watch(cxt, callbackObj) {
const data = cxt.data
for (const key in data) {
console.log(key);
defineReactive(data, key, callbackObj)
}
}
使⽤
我们在执⾏watch回调前没有对新⽼赋值进⾏⽐较，原因是当中对data中的变量赋值，即使给引⽤变量赋值还是相同的值，也会因为引⽤地址不同，判断不相等。如果想对新⽼值进⾏⽐较就不能使⽤=== ，可以先对obj或者array转换为json字符串再⽐较。
//index.js
//获取应⽤实例
const app = getApp()
import {watch} from '../../utils/watcher';
Page({
data: {
motto: 'hello world',
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('UserInfo'),
tableData: []
},
onLoad: function () {
this.initWatcher();
},
initWatcher () {
watch(this, {
motto(newVal, oldVal) {
console.log('newVal', newVal, 'oldVal', oldVal);
},
userInfo(newVal, oldVal) {
console.log('newVal', newVal, 'oldVal', oldVal);
},
tableData(newVal, oldVal) {
console.log('newVal', newVal, 'oldVal', oldVal);
}
});
},
onClickChangeStringData() {
this.setData({
motto: 'hello'
});
},
onClickChangeObjData() {
this.setData({
userInfo: {
name: 'helo'
}
});
},
onClickChangeArrayDataA() {
const tableData = [];
this.setData({
tableData
});
}
})
参考
总结
以上所述是⼩编给⼤家介绍的React和Vue中监听变量变化的⽅法，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。