React 组件之 Component PureComponent Function Component

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

posted @ 2019-08-27 16:21  Bruce-K  阅读(760)  评论(0编辑  收藏