PureComponent是什么？

[zhouzhongyuan]

1.概念来源

来源于pure function。

A pure function is a function where the return value is only determined by its input values, without observable side effects.

①不改变input ②类似数学中函数y=f(x), x确定，y就唯一确定。

2.概念

React.PureComponent is exactly like React.Component but implements shouldComponentUpdate() with a shallow prop and state comparison.

——react.purecomponent

如何实现shouldComponentUpdate的呢？
大致是这样的

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

3.目的

提高React的速度。
此概念是相对于Component提出的。如何提高了速度呢？
mount的时候Component中的shouldComponentUpdate始终返回true。

• 使用了PureComponent之后，通过判断state、props有没有改变，来决定是否render，
• 如果不需要render，那么VirtualDOM就不会生成，
• diff就会更快（因为需要比较的东西少了啊）。

更少的VirtualDOM和更少的diff，提高了React的速度。

下图为React更新的示意图，从左到右，update内容逐渐减少。

4.什么不是PureComponent

class FullName extends Component {
  render() {
    const { firstName, lastName } = this.props;

    return (
      <div>{firstName} {lastName} - {new Date}</div>
    )
  }
}

遗留问题

• context对PureComponent有什么影响？

参考文献

• Why and How to Use PureComponent in React.js

• Разбор: как и зачем применять PureComponent в React(看评论)

• 什么是 Impure Component

• How to implement shouldComponentUpdate with this.context? #2517

• React PureComponent 源码解析