PureComponent (React.momo)

在使用PureComponent的时候,只能把react组件写成是class的形式,不能使用函数的形式;react v16.6.0之后,可以使用React.memo来实现函数式的组件,也有了PureComponent的功能。

const ListComponent = React.momo(() => (
    <div>{this.props.data || 'loading'}</div>
))

所谓浅比较(shallowEqual),即react源码中的一个函数,然后根据下面的方法进行是不是PureComponent的判断,帮我们做了本来应该我们在shouldComponentUpdate中做的事情。

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

Leave a Reply

Your email address will not be published. Required fields are marked *