前言
react 优化从减少渲染真实 DOM 的频率，减少虚拟 DOM 的对比频率两个方面
事件清理
在组件上绑定的定时器，监听事件需要在组件卸载的时候删除
class 组件
pureComponent 和 shouldComponentUpdate
react.memo
将函数组件变成纯组件，将当前 props 与上一次 props 对比，如果不发生变化，回阻止组件重新渲染
组件懒加载
使用 lazy 包裹一下 import 引用组件
使用 fragment
占位标记符，用于标记额外无意义标签
减少内联函数定义
添加事件时，如果使用内联函数，每次 render 会生成新的函数实例，在 diff 对比时，新旧函数实例不同会导致 react 总是绑定新的函数实例，而旧的函数实例又需要垃圾回收器处理
避免内联样式
内联样式会被编译成 js 代码，通过 js 将样式映射到元素上，需要 js 花更多的时间执行脚本，增加组件负担
错误边界
避免数据结构突变
hooks 优化
使用 useMemo 缓存，监测值不发生变化，不会重新计算 使用 useCallback 缓存函数，使重新渲染总能获得相同函数