React 组件之 Component PureComponent Function Component

Posted 2022-09-01 ajaxkong

Virtual DOM , 通过高效的Diff算法对变化的部分首尾两端做批量更新，所有的比较都是浅比较shallowEqual。谁都玩不起深比较，facebook自己都做不到~

Component ：一定要配套使用shouldComponentUpdate , 否则不管props or state是否更新组件一定更新

pureComponent ：当组件的props和state不变时，组件是不更新的。仅仅只需要替换component => pureComponent，零投入超高回报

function Component：写纯函数组件非常简洁优雅，官方也推荐这种写法。但是，这并不代表纯函数组件是性能最好的组件写法。
在内部被包装成了一个只有render方法的StatelessComponent组件，在所有情况下都会更新。
（facebook说过要优化StatelessComponent，要优化它的性能也很简单，但就是一直没优化，也不知道为什么。后来我才知道有了终极解决方案，React Hook）
因此，并不建议使用它写比较复杂的组件

总结：

PureComponent > StatelessComponent > Component

function Component vs PureCompoent ,不建议比较复杂的页面，使用function Component.

 

参考知乎链接：React组件性能优化实例解析 https://zhuanlan.zhihu.com/p/34632531