前置知识
父组件render，所有的子组件都会render。
组件的state、props、context都不变时，触发默认的性能优化（组件不render）。
react默认是全等比较。特点：高效，但命中率低。
react提供了一些性能优化api。特点：存在性能损耗，但命中率高。
减轻state
为了更优的性能，可以减少父组件中的state。
方式如下：
- 只存储跟组件渲染有关的数据。
- 不用做渲染的数据不要放在state中。
- 可以将数据直接挂载到this中。
类组件性能优化
1.使用shouldComponentUpdate钩子
该钩子接收两个参数：prevProps, nextState。
该钩子return false时，该组件不会re-render。
该钩子return true时，该组件会re-render。
2.使用React.PureComponent
PureComponent内部自动实现了shouldComponentUpdate钩子。
自动通过比对前后两次的props和state的值，来决定是否重新渲染组件。
注意：这里的比较是浅层比较(shallow compare)。只比较引用的地址。
函数组件性能优化
1.使用React.memo函数（高阶组件）
React.memo(functionComponent)
功能和React.PureComponent类似。也是浅层对比(shallow compare)。
注意：父组件给子组件传入函数时，子组件也会更新。
2.使用useCallback钩子
const addNum = useCallback(()=>{...}, [])
useCallback和React.memo配合使用。
useCallback缓存的是函数。
3.使用useMemo钩子
类似vue中的计算属性。
useMemo一般用来缓存计算的结果。
