pureComponent

pureComponent

作用

当使用component时，父组件的state或prop更新时，无论子组件的state、prop是否更新，都会触发子组件的更新，这会形成很多没必要的render，浪费很多性能；pureComponent的优点在于：pureComponent在shouldComponentUpdate只进行浅层的比较，只要外层对象没变化，就不会触发render,减少了不必要的render，当遇到复杂数据结构时，可以将一个组件拆分成多个pureComponent，以这种方式来实现复杂数据结构，以期达到节省不必要渲染的目的，如：表单、复杂列表、文本域等情况；

区别

pureComponent通过prop和state的浅比较（shallowEqual）来实现shouldComponentUpdate,component是需要开发者在shouldComponentUpdate钩子函数中自己写render逻辑的，在某些情况下可以使用pureComponent来提升性能。

浅比较（shallowEqual）：是react源码中的一个函数，它代替了shouldComponentUpdate的工作, 只比较外层数据结构，只要外层相同，则认为没有变化，不会深层次比较数据。

优缺点

pureComponent的优点：

不需要开发者使用shouldComponentUpdate就可使用简单的判断来提升性能；

pureComponent的缺点：

由于进行的是浅比较，可能由于深层的数据不一致导致而产生错误的否定判断，从而导致页面得不到更新；

为什么可以提升性能

主要在于pureComponent可以减少不必要的render，从而提高了性能，另外就是，不需要再手写shouldComponentUpdate里面的代码，从而节省了代码量；

当组件更新时，pureComponent的shouldComponentUpdate函数里对props和state做了一个浅对比，如果组件的state和prop都没有发生变化，就不会触发render方法，省去了virtual DOM的diff和重新生成的过程，从而提升了性能；也正是因为是浅对比，所以不适合使用在含有多层嵌套对象的state和prop中。

总结

pureComponent能够节省大部分不必要的渲染，尤其在表单等复杂组件中，将组件拆分成简单的pureComponent，使得组件变得可维护；

参考文章：
https://juejin.cn/post/6844904094021206024