前言：React频繁的setStete导致频繁的渲染，造成不必要的性能浪费，甚至会影响机器性能较差的用户的体验感 前提了解
在说优化之前，需要知道‘浅比较’和‘深比较’。
- JS中典型的浅比较就是使用‘===’来比较两个对象，只检查两个对象之间是否是同一个对象的引用，也就是说，如果，比较的两边是同一个对象的引用的话则会返回true
- 深比较则需要比较两个对象之间的所有属性是否都相等，无关是否引用。需要用遍历的方式遍历两个对象的所有属性，包括属性对应的对象也需要属性相等。JS中还没有提供深比较的API。
优化的方式这里提供两种
通过shouldComponentUpdate来优化渲染性能
- shouldComponentUpdate通过控制返回的布尔值来决定是否重新render
- 这个渲染优化需要自己手动去解决，较灵活
shouldComponentUpdate(nextPorps, nextState) {
const { temp } = this.state
if (temp === nextState.temp) return false
return true
}
// 很明显，这个组件是否重新渲染取决于temp是否发生改变
pureComponent通过浅对比来提升渲染性能
不建议使用了pureComponent还使用shouldComponentUpdate，继承自PureComponent的组件不用我们手动去判断prop和state
- pureComponent通过浅比较的方式来比较新旧state和新旧props，进而根据比较的结果来判断是否渲染，无需用户自己去手动优化(shouldComponentUpdate)
- 也就是说，只有state和props的值发生改变，包括number、string、bool的值改变，或者对象引用发生改变才会触发render
- 无需手动优化，但较复杂或者特定业务下需要重新渲染的时候不适合用pureComponent
pureComponent和父子组件之间的关系
- 我们明白一个道理就行了，父组件的渲染会触发子组件的渲染，由于puerComponet通过浅比较来断绝不必要的渲染，所以就从源头上断绝子组件的渲染。
- 我们需要注意的是两种情况： a. 父组件继承pureComponent，子组件继承Component的情况，一般来说，子组件自己的state发生改变后自己会重新render，但如果是子组件的props发生改变(父组件传给子组件的)，而父组件自己并没有渲染，相当于渲染被拦截了，所以子组件并不会重新render。 b. 父组件继承Component，子组件继承puerComponet的情况，和预期的一样，父组件传给子组件的props发生改变后做个浅比较才会决定子组件是否重新渲染。
什么时候用Component或者pureComponent & 总结
- state、props少更新时，也就是希望组件少重新渲染时用pureComponet，常见的应用场景就是page，最为最顶层的页面，频繁的重新render整个页面将会导致页面内的所有组件都会重新render。因为pureComponet频繁的浅比较也会消耗性能，甚至不如Component。也就是说puerComponent真正起作用的地方是在纯组件上。
- 与用户交互比较多的组件，也就是state、props频繁的更新时使用Component。可以简单的理解为尽量父组件用pureComponet，子组件用Component，具体还需要视业务逻辑来自行选择。
- 总结成一句话就是：继承puerComponet最好作为展示组件(state、props不发生变化)，需要频繁渲染的组件用Component
参考文献：www.jianshu.com/p/c41bbbc20…
群鱼湾IT赋能你，赋能你的IT
IT技术与创业分享
