reactソース読み取りノート(7)PureComponent性能最適化

本稿ではreact 15.6を用いる.1のコード
PureComponentを知る前に、このような2つのコードを見てみましょう.

class Parent extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'jack'
        };
    }
    render(){
        return (
            

                {this.state.name}
                click me
                
            
        )
    }
}

class Child extends React.Component {
    componentDidUpdate() {
        console.log('i am update');
    }
    render() {
        return 

        
    }

}

コンポーネントParentにはコンポーネントChildがあるが、Childはまだ外部からpropsを受信していないので、親ラベルがボタンをクリックしてthisをトリガーする.stateは、親コンポーネントがdirtyComponentに設定され、更新が開始されると、子コンポーネントもi am updateを印刷していることに気づき、すなわち子コンポーネントも更新されているが、ソースコードから見ると、このときchildは実際に更新する必要はない.では、サブコンポーネントをPureComponentから継承してみましょう.

class Child extends React.PureComponent {
    componentDidUpdate() {
        console.log('i am update');
    }
    render(){
        return 

    }
}

这个时候发现我们点击父组件的按钮，子组件不在更新了，带着这个问题，我们来看看PureComponent的源代码，位于ReactBaseClasses.js

function ReactPureComponent(props, context, updater) {
  // Duplicated from ReactComponent.
  this.props = props;
  this.context = context;
  this.refs = emptyObject;
  // We initialize the default updater but the real one gets injected by the
  // renderer.
  this.updater = updater || ReactNoopUpdateQueue;
}

ReactPureComponent.prototype = new ComponentDummy();
ReactPureComponent.prototype.constructor = ReactPureComponent;
Object.assign(ReactPureComponent.prototype, ReactComponent.prototype);

//     
ReactPureComponent.prototype.isPureReactComponent = true;

コンストラクション関数は通常のReactComponentコードとそっくりですが、違いはPureComponentの例に属性isPureReactComponentが1つ増えてtrueとなっていることですが、この属性はどのような役割を果たしていますか?カスタムコンポーネント(ReactComponent.js)のmountComponentメソッドに戻る

mountComponent:function(){
......
 // Support functional components
    if (!doConstruct && (inst == null || inst.render == null)) {
      renderedElement = inst;
      warnIfInvalidElement(Component, renderedElement);
      inst = new StatelessComponent(Component);
      this._compositeType = CompositeTypes.StatelessFunctional;
    } else {
      if (isPureComponent(Component)) {
        this._compositeType = CompositeTypes.PureClass;
      } else {
        this._compositeType = CompositeTypes.ImpureClass;
      }
    }
}
......

ここで、通常のreactコンポーネントはelseメソッドに入り、ここでisPureComponent関数を実行し、プライベート属性を変更します.compositeType値に対応するisPureComponentは次のとおりです.

function isPureComponent(Component) {
  return !!(Component.prototype && Component.prototype.isPureReactComponent);
}

つまり、isPureReactComponentがtrueである場合、PureComponentから継承されたコンポーネントのプロトタイプにisPureReactComponentがtrueであることを知っています.compositeType=CompositeTypes.PureClassは何に使いますか?childコンポーネントcomponentDidUpdateを呼び出すupdateComponentメソッドを見てみましょう(詳細はreactソース読み取りノート(5)コンポーネントのライフサイクルを参照してください)

updateComponent: function(
    transaction,
    prevParentElement,
    nextParentElement,
    prevUnmaskedContext,
    nextUnmaskedContext,
  ) {
    ......
    if (!this._pendingForceUpdate) {
      //    shouldComponentUpdate
      if (inst.shouldComponentUpdate) {
        //         
          shouldUpdate = inst.shouldComponentUpdate(
            nextProps,
            nextState,
            nextContext,
          );
      } else {
        if (this._compositeType === CompositeTypes.PureClass) {
          shouldUpdate =
            !shallowEqual(prevProps, nextProps) ||
            !shallowEqual(inst.state, nextState);
        }
      }
    }
  },
  ......

ここで,コンポーネントがshouldComponentUpdateメソッドを宣言していない場合,PureComponentの場合shallowEqualメソッドが呼び出され,現在のpropsおよびstateが転送されることに注意し,対応するshallowEqualメソッドを見てみよう.

function is(x, y) {
  // SameValue algorithm
  if (x === y) {
    // Steps 1-5, 7-10
    // Steps 6.b-6.e: +0 != -0
    // Added the nonzero y check to make Flow happy, but it is redundant     
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    //   x y  NaN  ，    true,    false
    return x !== x && y !== y;
  }
}

function shallowEqual(objA, objB) {
  //           (number,string,undefined)   ，     true
  if (is(objA, objB)) {
    return true;
  }

  //                    ，    false
  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
    return false;
  }

  //             
  //https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
  var keysA = Object.keys(objA);
  var keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  // Test for A's keys different from B.
  for (var i = 0; i < keysA.length; i++) {
    if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
      return false;
    }
  }

  return true;
}

コードは簡単で、簡単に言えば、入力パラメータ値が等しいかどうかを判断し、参照タイプであればkeyの長さを判断し、その後、その第1層keyとvalueを比較(すなわち浅い比較)し、完全に等しい場合、objectA、objectBは等しい.
外層コードを持ち込んで見る
shouldUpdate = !shallowEqual(prevProps, nextProps) ||!shallowEqual(inst.state, nextState);
prevProps,nextProps,inst.state,nextState,浅さが同じならshouldUpdateはfalseであるが,それなら当然レンダリングフェーズをスキップし,props,state,contextなどの情報を再更新するだけである.
まとめ
コードを見た後、PureComponentは実は一回のComponentのもう一度のパッケージで、自分でshouldComponentUpdateを実現するのと同じ効果で、多くの場合、直接Componentを使って業務の開発を行うことができて、もし性能のボトルネックに出会ったら、PureComponentで最適化を試みることができて、PureComponentが依然として性能の問題が現れたら、では、自分でコードを分析し、shouldComponentUpdateメソッドを書き直してみる必要があります.