react 类组件中减少重复渲染

前言：

在react开发中，经常会遇到组件重复渲染的问题，父组件一个state的变化，就会导致以该组件的所有子组件都重写render，尽管绝大多数子组件的props没有变化

render什么时候会触发

首先，先上一张react生命周期图：

image.png

这张图将react的生命周期分为了三个阶段：生成期、存在期、销毁期，这样在create、props、state、unMount状态变化时我们可以清楚的看到reacte触发了哪些生命周期钩子以及什么时候会render。

如果我们需要更改root的一个state，使绿色组件视图更改

image.png

如果你写过vue，你会发现组件更新是如上图那样的（视图指令已编译为修改视图的函数存放在绑定的state里的属性里，所以能够做到靶向修改），而react会以组件为根，重新渲染整个组件子树，如下图（绿色是期望的render路径，橙色是无用render）：

image.png

所以在react里，我们探讨的render性能优化是react调用render的路径如下：

image.png

如何避免这些不必要的render：

shouldComponentUpdate

shouldComponentUpdate(nextProps, nextState)

使用shouldComponentUpdate()以让React知道当前状态或属性的改变是否不影响组件的输出，默认返回ture，返回false时不会重写render，而且该方法并不会在初始化渲染或当使用forceUpdate()时被调用，我们要做的只是这样：

shouldComponentUpdate(nextProps, nextState) {
  return nextState.someData !== this.state.someData
}