render函数被调用

案例分析

1. 在App页中，我们增加了一个计数器的代码；

2. 当点击+1时，会重新调用App的render函数；

3. 而当App的render函数被调用时，所有的子组件的render函数都会被重新调用；

这里会出现一个问题如果我们修改了App页中的数据，所有的组件需要被重新render，进行diff算法性能必然是很低的。

这里能否这样操作，没有发生数据变化的组件不进行render，只有数据变化的组件进行render

shouldComponentUpdate

React给我们提供了一个生命周期方法 shouldComponentUpdate（很多时候，我们简称为SCU），这个方法接受参数，并且需要有返回值：

该方法有两个参数：

参数一：nextProps 修改之后，最新的props属性

参数二：nextState 修改之后，最新的state属性

该方法返回值是一个boolean类型：

返回值为true，那么就需要调用render方法；

返回值为false，那么久不需要调用render方法；

默认返回的是true，也就是只要state发生改变，就会调用render方法；

比如我们在App中增加一个message属性：

jsx中并没有依赖这个message，那么它的改变不应该引起重新渲染；

但是因为render监听到state的改变，就会重新render，所以最后render方法还是被重新调用了；

PureComponent

如果所有的类，我们都需要手动来实现 shouldComponentUpdate，那么会给我们开发者增加非常多的工作量。

我们来设想一下shouldComponentUpdate中的各种判断的目的是什么？

props或者state中的数据是否发生了改变，来决定shouldComponentUpdate返回true或者false；

事实上React已经考虑到了这一点，所以React已经默认帮我们实现好了，如何实现呢？

将class继承自PureComponent。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情