码迷,mamicode.com
首页 > 其他好文 > 详细

React 组件之 Component PureComponent Function Component

时间:2019-08-27 16:58:55      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:end   方案   批量   https   知乎   通过   date   简单   建议   

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

标签:end   方案   批量   https   知乎   通过   date   简单   建议   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!