React和Vue中，是如何監聽變量變化的

時間 2019-11-30

標籤 react vue 如何監聽變量變化欄目 React 简体版

原文原文鏈接

React 中

本地調試React代碼的方法

先將React代碼下載到本地，進入項目文件夾後yarn build
利用create-react-app建立一個本身的項目
把react源碼和本身剛剛建立的項目關聯起來，以前build源碼到build文件夾下面，而後cd到react文件夾下面的build文件夾下。裏面有node_modules文件夾，進入此文件夾。發現有react文件夾和react-dom文件夾。分別進入到這兩個文件夾。分別運行yarn link。此時建立了兩個快捷方式。react和react-dom
cd到本身項目的目錄下，運行yarn link react react-dom 。此時在你項目裏就使用了react源碼下的build的相關文件。若是你對react源碼有修改，就刷新下項目，就能裏面體如今你的項目裏。

場景

假設有這樣一個場景，父組件傳遞子組件一個A參數，子組件須要監聽A參數的變化轉換爲state。前端

16以前

在React之前咱們可使用componentWillReveiveProps來監聽props的變換vue

16以後

在最新版本的React中可使用新出的getDerivedStateFromProps進行props的監聽，getDerivedStateFromProps能夠返回null或者一個對象，若是是對象，則會更新statenode

getDerivedStateFromProps觸發條件

咱們的目標就是找到 getDerivedStateFromProps的觸發條件react

咱們知道，只要調用setState就會觸發getDerivedStateFromProps，而且props的值相同，也會觸發getDerivedStateFromProps(16.3版本以後)git

setState在react.development.js當中github

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');
  }
}
複製代碼

執行的是一個警告方法json

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));
}
複製代碼

咱們看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

最終方法是執行

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()
    }
  })
}
複製代碼

小程序

自定義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
    });
  }
})

複製代碼