React 性能优化

性能优化

React 性能优化方案，说出来可能有很多，但是那些是所有前端项目、框架都需要做的。如

• 代码分割，代码压缩，使用生产版本的代码等（前端框架都需要，通用方案）

• 渲染列表时合理使用 key （vue 也有）

• 缓存组件（vue 也有）

只有一点是 React 特色的：如何避免无效渲染？（vue 就没有这个困扰，后面再说）

1. shouldComponentUpdate 简称 SCU

2. PureComponent 和 memo

3. 不可变数据 immutable.js

解释 shouldComponentUpdate

• 复杂项目中，React 会出现一些无效的渲染（ 有些可能并不影响性能，不是所有的都需要优化）

• React 提供了 SCU 来让用户自己选择是否优化

• SCU 返回 true 则渲染，返回 false 则不渲染。默认返回 true

那么问题来了 —— 既然这样，能否将 SCU 都做一个判断，props 和 state 一样，就返回 true 呢？

答案是不能 —— 做演示：1. 借助 propsDemo 改造；2. 使用 push 操作数组；3. 使用 _.isEqual 对比 list ；4. 再分别注释掉 push 和 SCU 做对比。

• 回顾之前 setState 的使用，纯函数，不可变值

• push 会同时改变 nextState 和 this.state 的值，因此被 SCU 拦截并返回false

• 所以SCU 必须配合不可变值一起使用

• 为什么不默认props 和 state 一样就返回 true：

  • 深度比较可能更加耗费性能，还不如直接返回 true 渲染

PureComponent

• 与自带 shouldComponentUpdate 比较

• SCU 中实现了浅比较（只比较函数或数组第一层属性，深层次不管）—— 深度比较太消耗性能

• 演示 demo （List 使用 PureComponent，使用不可变值）

合理使用 shouldComponentUpdate 和 PureComponent

• 一定要用不可变值，否则会留坑（这是 React 的基本里面）

• 推荐使用 PureComponent

• 同时，state 设计尽量扁平

React.memo

• '"函数组件中的 PureComponent"'

• 用于函数组件（Class 组件用 SCU）

• 对于相同的 props ，会缓存渲染结果

• 默认只进浅层比较（和 PureComponent 一样）

用法：

不可变值 immutable.js

immutable.js

 const map1 = Immutable.Map({ a: 1, b: 2, c: 3 })
 const map2 = map1.set('b', 50)
 map1.get('b') // 2
 map2.get('b') // 50

• 专门为 React 设计的“不可变值”工具

• 基于共享数据（不是深拷贝），速度很快

• 有一定学习成本和迁移成本，因此仅推荐 复杂、大型 的项目使用

总结一下 React 性能优化

如何避免 React 组件重复渲染

• SCU 和不可变值

• PureComponent 和 React.memo

• immutable.js

• 按需使用 & state 层级