react 性能优化注意事项

2024-08-31 21:02:16

工具：

React 16 或更新版本只需在url 后边加 ?react_perf 后 performance 一栏中会添加 User Timing
devtool 分析 state、props 、组件树、redux store 数据；
profiler 工具能分析具体函数；
Timeline 工具跟 User Timing 大同小异；

优化点：

父组件更新默认触发所有子组件更新
列表类型的组件默认更新方式非常复杂

建议：

如果你有些组件是纯组件，那么把继承类从 Component 换成 PureComponent；
用immutable生成不可变数据；（ seamless-immutable 简易版）
针对列表遍历类型，遍历时候增加唯一 key 属性值（不推荐用数组下表）；
不是纯组件的话，子组件执行 shouldComponentUpdate 方法，自行决定是否更新；
render 尽量少新建变量和 bind 函数，在constructor() 中做；
函数中传参数量尽量少；
组件中 style 样式定义变量引入；
不要将包裹节点的类型随意修改；
使用return null而不是CSS的display:none来控制节点的显示隐藏。保证同一时间页面的DOM节点尽可能的少；
组件层次结构颗粒化；
请尽量使用const element、兜底值、对象、数组字面量放在组件外定义；
{...this.props} (不要滥用，请只传递component需要的props，传得太多，或者层次传得太深）；
使用无状态组件，没有生命周期，只是简单的接受 props 渲染生成 DOM 结构；
reselect 对redux 请求的数据进行缓存，没变就从缓存中取；
去抖频繁触发的事件（如：scroll、resize），lodash 有 _.debounce ，也有debounce的npm包；
setTimeout 和 setInterval 事件有 react-timeout 包 npm；

最新文章

热门文章