【react】React.memo和useMemo

首先我们需要了解的是，这两个api其实都是在起到缓存的效果，🔋提高react渲染效率，减少不必要的渲染浪费

📝这里分两种形式来分析

♦ class组件里面

我们熟知的，其中有两种写法：

• React.pureComponent，每次更新之前，会对props进行浅比较，发现没有改变就不会渲染；但是当遇到深的数据结构的时候，他无法识别出改变
• componentShouldUpdate 声明周期里，可以拿到state与props做比较，返回布尔值，决定是否更新渲染组件

♦ 函数式组件里面

1. React.memo
   • 包裹react组件，来自父组件的props没有发生改变的话，就不会渲染子组件
   • 第二个参数，可以传入一个判断方isEqual，可以拿到preProps和props做比较，返回布尔值，决定是否更新渲染组件
2. useMemo
   • useMemo可以用于处理颗粒度更细的情况，对于组件内的某一部分进行缓存，只有第二个参数更新，才会执行回调，得到最新的变量/组件，否则不变。
   • useCallback的原理也是一样的，区别就是，它是为了避免函数重复定义，一种对函数的缓存

📎 参考

B站飞舟老师 📺简单几步掌握-React组件优化需要用到的HOOKS