一、优化实践
从过往的经验和实践中,影响网页性能最大的因素就是浏览器的重绘和回流,React背后的虚拟DOM就是尽可能的减少浏览器的重绘和回流。以下都是实际使用中一些常见的优化实践。
1、{...this.props} (不要滥用,请只传递component需要的props,传得太多,或者层次传得太深,都会加重shouldComponentUpdate里面的数据比较负担,因此,请慎用spread attributes(<Component {...props} />))。
2、::this.handleChange()。(请将方法的bind一律置于constructor)
this.handleChange = this.handleChange.bind(this);
3、复杂的页面不要在一个组件里面写完,对组件拆分粒度要小。
4、请尽量使用const element。
5、map里面添加key,并且key不要使用index(可变的)。具体可参考:使用Perf工具研究React Key对渲染的影响
6、尽量少用setTimeOut或不可控的refs、DOM操作,使用数据驱动,而不是操作DOM的方式。
7、props和state的数据尽可能简单明了,扁平化,如果不可避免的使用了多层数据结构,在复制时必须要用深拷贝方式重新生成新的对象或者数组,深拷贝可以使用lodash中的cloneDeep方法.
import { cloneDeep } from 'lodash';
8、使用return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少。
9、和视图无关的数据变化不要放在state中,这样可以避免不必要的render操作。
二、React组件性能优化
1、react性能查看工具
(1)React官方提供的:React.addons.Perf
在chorme中先安装React Perf扩展,然后在入口文件或者redux
的store.js
中加入相应的代码即可。
import Perf from 're-addons-perfact';
const win = window;
win.perf = Perf;
查看react加载组件时所耗费的时间的工具,在react 16版本之前我们可以使用React Perf
来查看。从React16版本开始,我们可以直接在url后加上?react_pref
,就可以在chrome浏览器的performance
,我们可以查看User Timeing
来查看组件的加载时间。
使用此工具的具体操作大家可以看下图所示: