Warning: count(): Parameter must be an array or an object that implements Countable in /www/wwwroot/www.xcondor.cn/usr/plugins/AMP/Action.php on line 381

Warning: getimagesize(): Filename cannot be empty in /www/wwwroot/www.xcondor.cn/usr/plugins/AMP/Action.php on line 469
React性能优化之

沙漠里的小蜜蜂

React性能优化之


React的优化是基于shouldComponentUpdate的,该生命周期默认返回true,所以一旦prop或state有任何变化,都会引起重新render。

 

shouldComponentUpdate

  1. {...this.props}?(不要滥用,请只传递component需要的props,传得太多,或者层次传得太深,都会加重shouldComponentUpdate里面的数据比较负担,因此,请慎用spread attributes(<Component {...props} />))。
  2. this.handleChange()。(请将方法的bind一律置于constructor)
  3. this.handleChange.bind(this,id)
  4. 复杂的页面不要在一个组件里面写完。
  5. 请尽量使用const element
  6. map里面添加key,并且key不要使用index(可变的)。具体可参考使用Perf工具研究React Key对渲染的影响
  7. 尽量少用setTimeOut或不可控的refs、DOM操作。
  8. propsstate的数据尽可能简单明了,扁平化。
  9. 使用return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少。

immutable.js

PureComponent

 

当前页面是本站的「Baidu MIP」版。查看和发表评论请点击:完整版 »

因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合MIP标准。