React中一般继承的是Component,但是Component中无论state还是prop更新,都会重新调用render方法更新,这样在某些时候比较浪费,于是有了个PureComponent,相比Component,可以在某些不必要的是时候不更新。

我们先看个一个简单的例子,一个普通继承Component的组件,当父组件更新时,自己会被连带更新:

上面的Button组件就是一个普通继承Component的组件,每次父组件更新了,自己会被连带更新。假如Button组件是一个很复杂的组件,每次都被更新,势必会比较浪费,如果此时子组件继承PureComponent,那么就不会每次都重新渲染了:

但是用PureComponent不是说就一直不更新了,如果它的prop上写了对象或者方法的时候,那么每次父组件渲染的时候,它们还是会被重新渲染。

如果用的是对象或者方法的引用,那么还是不会更新的。

PureComponent和Component区别

通过刚才的实际例子,我们大概了解了PureComponent的作用,就是在某些时候可以不更新组件,某些时候又会更新组件,那么到底啥时候更新组件呢?和Component有什么关系呢?

实际上PureComponent是一个实现了shouldComponentUpdate方法的Component,shouldComponentUpdate方法决定了一个组件是否允许重新渲染。PureComponent实现了“浅比较”,即如果内容没变,或者第一层的地址没变,那就不会更新,具体的实现代码如下:

通过浅比较更新前后的prop,state来决定是否要更新组件。上面我们看的是关于prop的比较,我们可以发现,如果prop上是方法或者对象,因为父组件每次渲染调用render都会让子组件的prop产生一个新的方法或对象的地址,因此浅比较的结果是需要更新。但是如果prop上是一个固定的方法或对象地址,那么则不会更新。

现在我们来看几个关于PureComponent中state变化是否更新的例子,这里,我们用实现了shouldComponentUpdate方法的Component去代替PureComponent。

上面是一个数组,点击delete删除元素,但是因为this.setState({items})的地址没变,因此浅比较相同,不需要更新。这里我们可以在shouldComponentUpdate中一步一步看到比较结果,方便我们分析。

上面是的items被给了新地址,this.setState({items:[].concat(items)})也可以拿到一个新地址,这样浅比较的结果是需要更新的。

React.memo()

React.memo这个概念和PureComponent很类似,只不过PureComponent用在类上,React.memo用在函数式组件上。React.memo实现如下:

我们来看一个简单的例子。对于一个普通的函数式组件,父组件每次更新,自己都会被更新:

如果用React.memo的话,那么就不会每次更新了:

React.memo还有第二个参数,就是判断prop的变化,然后决定是否变化,例如prop上有一个count属性,但是我们不想让它变化的时候重新渲染:

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字