React优化之 PureComponent（2019-11-1

首先看看PureComponent使用示例

class Child extends React.PureComponent {
  componentWillReceiveProps() {
    console.log("Child Props Update");
  }
  componentDidUpdate() {
    console.log("Child Did Update");
  }
  render() {
    let {message} = this.props;
    return (
      <div>
        <h1>Child,{message}</h1>
      </div>
    );
  }
}

在上面的代码中，Child是一个子组件，它接收从父组件传来的一个props：message（字符串类型），并在其中写了两个生命周期函数componentWillReceiveProps，componentDidUpdate。

PureComponent作用

先看下React的生命周期图

image.png
简单来说就是，如果子组件 Child 继承了Pure.Component，则父组件更新但传给 Child 的props没有变化时，Child生命周期走到shouldComponentUpdate的时候将返回false，也就是将跳过Child的render过程（跳过虚拟Dom中此组件部分的对比），从而提高了性能。

---

但是，要引起注意的是！PureComponent对比props用的是浅比较。如果你传入的props是一个对象，而父组件用了以下的方法更新：

let newObj = this.state.obj;
newObj.a = "new";
this.setState({
  obj: newObj
});

obj对象的值变化了，但其引用没有变化，Child组件是不会触发更新的。所以如果你使用PureComponent但子组件没有按预期变化，不要觉得奇怪，先看看是不是上面的情况。

参考：
图解ES6中的React生命周期