美文网首页
【react】React.memo和useMemo

【react】React.memo和useMemo

作者: Adder | 来源:发表于2021-06-22 12:06 被阅读0次

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

📝这里分两种形式来分析

♦ class组件里面

我们熟知的,其中有两种写法:

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

♦ 函数式组件里面

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

📎 参考

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

相关文章

网友评论

      本文标题:【react】React.memo和useMemo

      本文链接:https://www.haomeiwen.com/subject/kwuyyltx.html