前端进阶（八）React16性能优化-实战

最新推荐文章于 2025-02-07 00:45:00 发布

原创

最新推荐文章于 2025-02-07 00:45:00 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#React #性能优化

本文详细介绍了React16的性能优化实践，包括避免滥用props、预绑定方法、组件拆分、使用const、设置合适的key等。还讨论了React组件性能优化，如使用React.addons.Perf和react-perf-tool工具、定制shouldComponentUpdate、利用PureComponent和Immutable.js。此外，文中还提到了Redux的性能优化，如reselect和redux-saga。

一、优化实践

从过往的经验和实践中，影响网页性能最大的因素就是浏览器的重绘和回流，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来查看组件的加载时间。