一、概念

shouldComponentUpdate(nextProps, nextState) {
    // 判断是否需要被渲染，如果需要则返回true，否则返回false 
    if (nextProps.b === this.props.b) {
        return false;
    } else {
        return true;
    }
}

二、适用场景

代码演示：

运行结果：

可以看到虽然只有组件一有数据更新，但所有组件都被重新渲染加载了。这时候就需要用到SCU了。

三、使用方法

3.1  基本使用方法 之一

代码演示：

运行结果：

可以看到，只有更新的组件进行了重新加载。未更新的组件并没有受到影响。

3.2  PureComponent方法

代码展示：

运行结果：

可以看到，第三组件只有在首屏时加载一次，而后再没有加载，说明方法成功 

3.3   React.memo高阶组件

 代码展示：

运行结果：

 3.4  lodash.isEqual方法

多层的对象要进行比较，使用lodash 提供的递归深度比较。

 代码展示：

 运行结果：