React高阶组件——React.momo

父子组件的渲染规律

因为子组件是父组件的一部分,默认父组件发生变化时候子组件也会重新渲染。

react.memo的提出

但是当子组件状态变化触发重新渲染时,父组件不会重新触发,因为为避免不必要的渲染,会缩在最小范围内。就不会让父组件也发生重新渲染。 但是如果子组件非常复杂,还要在每次父组件重新渲染的时候跟着被渲染,就会产生 无意义的损耗。 为此,用react.memo来缓存子组件,当子组件的状态没变化时候就不用重新渲染。当子组件真的变化了,再重新渲染,重新缓存。

使用方法:

从react中解构出来memo const {memo}=react 用memo包裹子组件

js 复制代码
    const Child=memo(()=>{
      return <>
      <h1>{count}</h1>
      <button onClick={()=>setcount(count+1)}>+</button>
      <button onClick={()=>setcount(count-1)}>-</button>
      </>
    })

意思就是memo括号中的整个作为一个参数,memo就返回一个已经缓存化/记忆化的这样一个组件child。 父组件里面不变,直接用<child/>

重新缓存的情况:

  1. props组件嵌套属性改变
  2. state组件自身状态改变
  3. useContext跨组件通信数据改变

重新缓存失败的情况:

  • 复杂数据类型(引用类型) :数组 (arr)、函数 (fn)、对象等是通过引用地址 传递的。每次父组件重新渲染时,即使内容未变,这些值也会被重新创建 ,导致内存地址变化,React.memo 的浅比较会认为 props 发生了变化,从而触发子组件重新渲染。

  • 简单数据类型(原始类型) :如 stringnumberbooleannullundefinedsymbol 等,直接比较值是否相同,不会因内存地址问题引发重新渲染。

  • 解决方法:

    1. 使用 useMemo 缓存数组/对象
      避免父组件每次渲染时重新创建引用:
    ini 复制代码
    const memoizedArr = useMemo(() => [1, 2, 3], []);
    <ChildComponent arr={memoizedArr} />
  1. 使用 useCallback 缓存函数

    确保函数引用不变:

    ini 复制代码
    const memoizedFn = useCallback(() => {}, []);
    <ChildComponent fn={memoizedFn} />
  2. 自定义 areEqual 比较函数

    手动控制 React.memo 的 props 比较逻辑:

    csharp 复制代码
    const areEqual = (prevProps, nextProps) => {
      return prevProps.arr.join() === nextProps.arr.join();
    };
    export default React.memo(ChildComponent, areEqual);
相关推荐
缘如风2 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱2 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年2 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
_r0bin_2 小时前
分片上传-
前端·javascript·状态模式
东北南西2 小时前
手写React状态hook
前端·javascript·react.js
诗书画唱2 小时前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript
quan26313 小时前
Vue实践篇-02,AI生成代码
前端·javascript·vue.js
小桥风满袖3 小时前
极简三分钟ES6 - 类与继承
前端·javascript
子兮曰4 小时前
🚀99% 的前端把 reduce 用成了「高级 for 循环」—— 这 20 个骚操作让你一次看懂真正的「函数式折叠」
前端·javascript·typescript
wifi歪f4 小时前
📦 qiankun微前端接入实战
前端·javascript·面试