React與Preact中關於setState的區別

Preact是React的輕量級實現，是React比較好的替代者之一，有著體積小的優點，當然與React之間一定會存在實現上的差異，本文介紹了在setState 方面的差異之處。

原始碼分析

首先來分析下React以及Preact在setState部分的具體實作。

(太長不看想偷懶，可以直接下翻看結論)

React

關鍵程式碼：

##setState 階段：

// ReactUpdateQueue.jsenqueueSetState: function(publicInstance, partialState) {
  ...  var queue =
    internalInstance._pendingStateQueue ||
    (internalInstance._pendingStateQueue = []);
  queue.push(partialState);

  enqueueUpdate(internalInstance);}

可以看到React在setState 的時候不會做任何處理，會把變更直接放到一個專門處理state 的佇列裡供元件更新時使用。

更新階段：

// ReactCompositeComponent.jsupdateComponent: function(
  transaction,
  prevParentElement,
  nextParentElement,
  prevUnmaskedContext,
  nextUnmaskedContext,) {
  var inst = this._instance;
  ...  var willReceive = false;
  var nextContext;

  if (this._context === nextUnmaskedContext) {
    nextContext = inst.context;
  } else {
    nextContext = this._processContext(nextUnmaskedContext);
    willReceive = true;
  }

  var prevProps = prevParentElement.props;
  var nextProps = nextParentElement.props;

  if (prevParentElement !== nextParentElement) {
    willReceive = true;
  }

  if (willReceive && inst.componentWillReceiveProps) {
    ...    inst.componentWillReceiveProps(nextProps, nextContext);
  }
  
  // 在此处才计算 nextState
  var nextState = this._processPendingState(nextProps, nextContext); // 此处传入了 nextProps
  var shouldUpdate = true;

  if (!this._pendingForceUpdate) {
    if (inst.shouldComponentUpdate) {
      ...
      shouldUpdate = inst.shouldComponentUpdate(
        nextProps,
        nextState,
        nextContext,
      );
    } else {
      if (this._compositeType === CompositeTypes.PureClass) { // 敲黑板，知识点 —— 如果你的组件没实现shouldComponentUpdate，那么把React.Component 换成 React.PureComponent 可以获得基础版优化，提高性能。
        shouldUpdate =
          !shallowEqual(prevProps, nextProps) ||
          !shallowEqual(inst.state, nextState); // 浅比较，可以抄去自己改成属性黑/白名单版
      }
    }
  }
  ...}// ReactCompositeComponent.js_processPendingState: function(props, context) { // props: nextProps
  var inst = this._instance;
  var queue = this._pendingStateQueue;
  var replace = this._pendingReplaceState;
  this._pendingReplaceState = false;
  this._pendingStateQueue = null;

  if (!queue) {
    return inst.state;
  }

  if (replace && queue.length === 1) {
    return queue[0];
  }

  var nextState = Object.assign({}, replace ? queue[0] : inst.state);
  for (var i = replace ? 1 : 0; i < queue.length; i++) {
    var partial = queue[i];
    Object.assign(
      nextState,
      typeof partial === &#39;function&#39;
        ? partial.call(inst, nextState, props, context) // nextProps
        : partial,
    );
  }

  return nextState;}

透過上面元件更新的流程程式碼可以看到：

• 在updateComponent中，在componentWillReceiveProps 之後才會計算nextState，所以在componentWillReceiveProps 中setState 是可以在當次更新中生效的。

• 在 _processPendingState 會對佇列裡的 state 進行疊加，如果修改是函數方式，此處傳入的state參數是 nextState，props 是 nextProps。

Preact

關鍵程式碼：

setState 階段：

// component.jssetState(state, callback) {
  let s = this.state;
  if (!this.prevState) this.prevState = extend({}, s);
  extend(s, typeof state==='function' ? state(s, this.props) : state);
  if (callback) (this._renderCallbacks = (this._renderCallbacks || [])).push(callback);
  enqueueRender(this);}

實作的簡單粗暴，在setState 的時候就進行了合併，會立即改寫this.state，在第一次setState 時會保留state 狀態到prevState。由於是立即合併state，如果入參state是函數，props 將只是當前 this.props。

更新階段：

export function renderComponent(component, opts, mountAll, isChild) {
  ...
  previousProps = component.prevProps || props,
  previousState = component.prevState || state,
  previousContext = component.prevContext || context,
  ...  // if updating
  if (isUpdate) {
    component.props = previousProps;
    component.state = previousState;
    component.context = previousContext;
    if (opts!==FORCE_RENDER      && component.shouldComponentUpdate
      && component.shouldComponentUpdate(props, state, context) === false) {
      skip = true;
    }
    else if (component.componentWillUpdate) {
      component.componentWillUpdate(props, state, context);
    }
    component.props = props;
    component.state = state;
    component.context = context;
  }
  ...}

在更新流程前提取了舊state，shouldComponentUpdate、componentWillUpdate 之後還原回新值，所以在shouldComponentUpdate 生命週期中， this.props 將取得的是prevProps，這裡與React 的邏輯並不一致。

劃重點

相同點：

• 在 componentWillReceiveProps 中 setState 都會套用到 nextState。

• 在 shouldComponentUpdate 中 setState 都

  不會套用到 nextState，但可以直接操作傳入的 nextState。

不同點：

• React下setState 的值不會立即生效，會一直累積到componentWillReceiveProps，在此之後會合併，並提供給後續生命週期。而Preact下 setState 會立即反映到 this.state，

  但是，在更新元件的生命週期到 render 前(eg: shouldComponentUpdate), this.state 將會是 prevState。

• shouldComponentUpdate 階段setState 雖然不會影響到最終state 的值，但Preact下會影響this.state 的值，例如之後componentWillUpdate 中的this.state, 總之此階段不要setState反正也沒用。

• setState 如果使用函數修改，Preact下傳入的 props 將會是 prevProps，而React中是 nextProps，在 componentWillReceiveProps 中 setState 時要注意。

總結

如果你寫的工程需要同時相容React及Preact的話：

• 不要利用React下setState 在同一次元件更新執行前state 不立即更新的特性，注意多個setState 之間是否影響，必要時手動儲存舊值。

• 在元件更新生命週期中,除 componentWillReceiveProps 之外不要使用 setState，提供了 nextState 的生命週期，可以直接修改 nextState。

• 盡量避免使用 setState 函數修改方式，在 componentWillReceiveProps 中使用時，使用生命週期中的 prevProps(this.props) 和 nextProps。

p.s: antd-mobile 2.0正式版已發布，同時相容react、preact，輕量、快速、易用的行動端元件庫，等你來用~ 【傳送門】

以上是React與Preact中關於setState的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！