React 使用shouldComponentUpdate减少组件重复渲染

在react开发中，经常遇到父组件的state props 变化时，会导致该组件下的子组件重复渲染，即使该组件依赖props可能并没有变化~ props没有变化， 子组件的重复渲染是完全没有必要的，造成了性能浪费。

当顶部的组件State变化时，所有子组件会被重新渲染

我们需要做的优化是 当子组件的props变化了（图中绿色部分）再重新渲染子组件。

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

比对数据，当返回false时 不会重新渲染组件：

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

当数据过多时，不好比对，可使用pureComponent 。

React.PureComponent 与 React.Component 几乎完全相同，但 React.PureComponent 通过props和state的浅对比来实现 shouldComponentUpate()。如果对象包含复杂的数据结构，它可能会因深层的数据不一致而产生错误的否定判断(表现为对象深层的数据已改变视图却没有更新）

重点：

1. 无论组件是否是 PureComponent，如果定义了 shouldComponentUpdate()，那么会调用它并以它的执行结果来判断是否 update。在组件未定义 shouldComponentUpdate() 的情况下，会判断该组件是否是 PureComponent，如果是的话，会对新旧 props、state 进行 shallowEqual 比较，一旦新旧不一致，会触发 update。

2. 浅判等 只会比较到两个对象的 ownProperty 是否符合 Object.is() 判等，不会递归地去深层比较---源码

3. 至于复杂数据结构，用Object.key()获取下key，然后key和对应的value都是基础类型数据，就是算是简单数据结构，不然就是复杂

尽量将复杂类型数据（ArrayList）所关联的视图单独拆成PureComonent有助于提高渲染性能，比如表单、文本域和复杂列表在同一个 render() 中，表单域的输入字段改变会频繁地触发 setState() 从而导致 组件 重新 render()。而用于渲染复杂列表的数据其实并没有变化，但由于重新触发 render()，列表还是会重新渲染。

参考：https://segmentfault.com/a/1190000016494335