React里的PureComponent

简介

1. React 15.3增加，代表“纯组件”，前身是PureRenderMixin
2. 使用的时候其实就是继承的类从Component换成PureComponent
3. 目的是优化React项目，减少不必要的Render，并且少写shouldComponentUpdate

原理

1. 组件更新时，如果props、state都没有改变，就不触发render（也就省去了Virtual DOM的生成和比对过程）

2. 自动做了一层浅比较

   if (this._compositeType === CompositeTypes.PureClass) {
     shouldUpdate = !shallowEqual(prevProps, nextProps)
     || !shallowEqual(inst.state, nextState);
   }

3. 其中shallowEqual(浅比较)比较了Object.keys(state | props)的长度是否一致、key是不是都有、是否是同一个引用。但仅仅是比较了第一层，所以说是浅比较。

特点

1. 写组件的时候，应该仅仅把简单状态的部分抽离出来作为PureComponent——纯展示组件；那些复杂变动的部分应该抽离为正常的组件。
2. 如果还使用了shouldComponentUpdate，那么这个生命周期将获得优先控制权

3. 兼容版本的写法：

   import React { PureComponent, Component } from 'react'
   class foo extends (PureComponent || Component) {...}

4. setState的时候，不要使用同一个引用，即使你修改了原引用的数据也不行，还是会被认为是同一个引用，不触发Render

5. 不变的数据则必须使用同一个引用，比如在给pureComponent传入某个事件函数的时候，千万不要写匿名函数，否则每一次父组件的Render都会导致生成一个新的匿名函数，进而导致子组件触发Render
6. 需要处理空数组/空对象。因为[] === []和{} === {}结果都是false，解决的方法可以很巧妙：设置一个defaultValue = {}，这样就能保证指向同一个引用了。
7. pureComponent的优势就在于，在父组件里，只要它自己相关的state/props的指向没有变化，它就不会重新渲染。

写法

1. 比如可以直接在组件内增加defaultProps

   static defaultProps = {
   
   }

2. 其他写法其实没有太大区别