React 高级用法

性能优化

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

• 代码分割，代码压缩，使用生产版本的代码等（前端框架都需要，通用方案）
• 渲染列表时合理使用 key （vue 也有）
• 缓存组件（vue 也有）

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

• shouldComponentUpdate
• PureComponent 和 memo
• 不可变数据 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 的值，因此被 SCU 拦截
• SCU 必须配合不可变值一起使用

解释 PureComponent

• 自带 shouldComponentUpdate 比较
• 只有浅比较（只比较函数或数组第一层属性，深层次不管）—— 深度比较太消耗性能
• 演示 demo （List 使用 PureComponent，使用不可变值）

合理使用 shouldComponentUpdate 和 PureComponent

• 一定要用不可变值，否则会留坑（这是 React 的基本里面）
• 推荐使用 PureComponent
• 同时，state 设计尽量扁平

React.memo

• 用于函数组件（Class 组件用 SCU）
• 对于相同的 props ，会缓存渲染结果
• 默认只进浅层比较（和 PureComponent 一样）

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
})

不可变值 immutable.js

https://github.com/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