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;
 this.updater.enqueueSetState(this, partialState, callback, 'setState');
};
ReactNoopUpdateQueue {
 //...部分省略
  
 enqueueSetState: function (publicInstance, partialState, callback, callerName) {
 warnNoop(publicInstance, 'setState');
 }
}

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

執行的是一個警告方法

function warnNoop(publicInstance, callerName) {
 {
 // 實例的構造體
 var _constructor = publicInstance.constructor;
 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 the %s component.', callerName, componentName);
 didWarnStateUpdateForUnmountedComponent[warningKey] = true;
 }
}

看來 ReactNoopUpdateQueue 是一個抽象類，實際的方法並不是在這裏實現的，同時我們看下最初 updater 賦值的地方，初始化 Component 時，會傳入實際的 updater

function Component(props, context, updater) {
 this.props = props;
 this.context = context;
 // If a component has string refs, we will assign a different object later.
 this.refs = emptyObject;
 // 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 = createUpdateQueue(fiber.memoizedState));
 } else
 
 (queue1 = fiber.updateQueue),
 (queue2 = alternate.updateQueue),
 null === queue1
 ? null === queue2
  ? ((queue1 = fiber.updateQueue = createUpdateQueue(
  fiber.memoizedState
  )),
  (queue2 = alternate.updateQueue = createUpdateQueue(
  alternate.memoizedState
  )))
  : (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));
}

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

我們看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, root.expirationTime),
 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

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

最終方法是執行

function applyDerivedStateFromProps(
 workInProgress,
 ctor,
 getDerivedStateFromProps,
 nextProps
) {
 var prevState = workInProgress.memoizedState;
 {
 if (debugRenderPhaseSideEffects || debugRenderPhaseSideEffectsForStrictMode && workInProgress.mode & 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
 // 一旦更新隊列爲空，將派生狀態保留在基礎狀態當中
 workInProgress.memoizedState = memoizedState; // Once the update queue is empty, persist the derived state onto the
 // base state.
 var updateQueue = workInProgress.updateQueue;
 
 if (updateQueue !== null && workInProgress.expirationTime === 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
 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 方法

/**
* 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方法改寫，如果我們重新對變量進行賦值，那麼會判斷變量的新值是否等於舊值，如果不相等，則會觸發 dep.notify() 從而回調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 = Object.getOwnPropertyDescriptor(obj, key)
 if (property && property.configurable === false) {
 return
 }
 // cater for pre-defined getter/setters
 const getter = property && property.get
 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 (process.env.NODE_ENV !== 'production' && customSetter) {
 // dev環境可以直接自定義set
 customSetter()
 }
 // 將新的值賦值
 if (setter) {
 setter.call(obj, newVal)
 } else {
 val = newVal
 }
 childOb = !shallow && observe(newVal)
 // 觸發watch事件
 // dep當中是一個wacher的數組
 // notify會執行wacher數組的update方法，update方法觸發最終的watcher的run方法，觸發watch回調
 dep.notify()
 }
 })
}

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提升思維能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

小程序

自定義Watch

小程序的data本身是不支持watch的，但是我們可以自行添加，我們參照 Vue 的寫法自己寫一個。

watcher.js

export function defineReactive (obj, key, callbackObj, val) {
 const property = Object.getOwnPropertyDescriptor(obj, key);
 console.log(property);
 const getter = property && property.get;
 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('button.open-type.getUserInfo'),
 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
 });
 }
})