react源码阅读笔记(7)PureComponent 进行性能优化

本文使用的是react 15.6.1的代码

在认识PureComponent之前,我们来看一下这样俩段代码

class Parent extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'jack'
        };
    }
    render(){
        return (
            <div>
                <span>{this.state.name}</span>
                <button onClick={this.clickBtn.bind(this)}>click me</button>
                <Child/>
            </div>
        )
    }
}
class Child extends React.Component {
    componentDidUpdate() {
        console.log('i am update');
    }
    render() {
        return <div>
        </div>
    }

}

组件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 <div></div>
    }
}

这个时候发现我们点击父组件的按钮,子组件不在更新了,带着这个问题,我们来看看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并为true,这个属性有什么作用呢?
回到自定义组件(ReactCompositeComponent.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,上面知道,继承自PureComponent的组件原型上isPureReactComponent为true,知道了_compositeType=CompositeTypes.PureClass有什么用呢?在来看看调用child组件componentDidUpdateupdateComponent方法 (具体流程见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的长度,随后对其第一层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方法

推荐阅读更多精彩内容