首页 > 其他 > 详细

React 组件之 Component PureComponent Function Component

时间:2019-08-27 16:46:21      阅读:123      评论:0      收藏:0      [点我收藏+]

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

React 组件之 Component PureComponent Function Component

原文:https://www.cnblogs.com/ajaxkong/p/11419061.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!