React.memo 和 useMemo

现象

React 中,通常父组件的某个state发生改变,会引起父组件的重新渲染(和其他state的重新计算),从而会导致子组件的重新渲染(和其他非相关属性的重新计算)

  • 问题一: 如何避免因为某个state变化,导致组件的中其他属性(state)的重新计算?

**方案:**useMemo

  • 问题二: 如何避免因为父组件的重新渲染,导致子组件中非相关属性的重新计算?

**方案:**React.memo

结论

总结起来就一句话:

React.memo 用来限制组件重新渲染,而 useMemo用来限制组件中的部分变量重新计算

(前者主要针对组件的渲染,后者则侧重于组件内的计算)

示例

React.memo :【常用于子组件】

它是一个高阶组件(Higher-Order Component,HOC),用于包装函数组件

当父组件重新渲染时,往往会触发子组件的重新渲染。但很多时候子组件的 props 并没有改变,此时子组件的重新渲染就是不必要的,会造成性能浪费。

经过 React.memo 包装的组件,React 会对其 props 进行浅比较,如果新 props 和旧 props 相同,组件不会重新渲染,而是复用之前的渲染结果。(浅比较只会检查对象或数组的引用是否相同,而不会深入比较其内部的属性或元素)

javascript 复制代码
import React from 'react';

// 使用 React.memo 包裹组件
const MyComponent = React.memo(({ data }) => {
    console.log('组件重新渲染');
    return <div>{data}</div>;
});

const ParentComponent = () => {
    const [count, setCount] = React.useState(0);
    const someData = '固定数据';
    return (
        <div>
            {/* 如果子组件不用React.memo包裹,count变化后子组件也会重新渲染 */}
            <button onClick={() => setCount(count + 1)}>增加计数</button>

            {/* 只要 someData 不变,MyComponent 不会重新渲染 */}
            <MyComponent data={someData} />
        </div>
    );
};

export default ParentComponent;

useMemo

这是一个 React Hook,只能用于函数组件内部

它主要用于缓存计算结果,根据传入的依赖项数组来判断是否需要重新计算缓存的值,避免在每次组件渲染时都进行重复的高开销计算。

如果计算属性作为子组件的 props 传递,且子组件使用 React.memo 进行了优化,在父组件使用 useMemo 可以确保计算属性的引用在依赖项不变时保持稳定,从而避免子组件不必要的重新渲染。

javascript 复制代码
import React, { useState, useMemo, memo } from 'react';

const ChildComponent = memo(({ data }) => {
    console.log('ChildComponent rendered');
    return <div>{data}</div>;
});

const ParentComponent = () => {
    const [num, setNum] = useState(1);

    const calculatedData = useMemo(() => {
        return num * 2;
    }, [num]);

    return (
        <div>
            <input
                type="number"
                value={num}
                onChange={(e) => setNum(Number(e.target.value))}
            />
            <ChildComponent data={calculatedData} />
        </div>
    );
};

export default ParentComponent;

这里 calculatedData 通过 useMemo 缓存,当 num 不变时,calculatedData 的引用保持不变,ChildComponent 不会因为 props 的引用变化而重新渲染。

顺便提一下【useCallback】:

当父组件向子组件传递一个函数作为 props,并且子组件使用 React.memo 包裹时,useCallback 可以确保该函数的引用在依赖项不变时保持稳定,从而避免子组件因为函数引用的改变而进行不必要的重新渲染。

javascript 复制代码
import React, { useState, useCallback, memo } from 'react';

// 使用 React.memo 包裹子组件
const ChildComponent = memo(({ onClick }) => {
    console.log('ChildComponent 渲染');
    return <button onClick={onClick}>点击我</button>;
});

const ParentComponent = () => {
    const [count, setCount] = useState(0);

    // 使用 useCallback 缓存函数
    const handleClick = useCallback(() => {
        setCount(count + 1);
    }, [count]);

    return (
        <div>
            <p>计数: {count}</p>
            <ChildComponent onClick={handleClick} />
        </div>
    );
};

export default ParentComponent;
相关推荐
明仔的阳光午后43 分钟前
React 入门 02:从单页面应用到多页面应用
前端·react.js·前端框架
.生产的驴1 小时前
React 页面路由ReactRouter 路由跳转 参数传递 路由配置 嵌套路由
前端·javascript·react.js·前端框架·json·ecmascript·html5
非凡ghost1 小时前
批量转双层PDF(可识别各种语言) 中文绿色版
前端·windows·pdf·计算机外设·软件需求
苏卫苏卫苏卫1 小时前
【码源】智能无人仓库管理系统(详细码源下~基于React+TypeScript+Vite):
前端·react.js·typescript·vite·项目设计·智能无人仓库管理系统·码源
打小就很皮...1 小时前
PDF 下载弹窗 content 区域可行性方案
前端·javascript·pdf
Felicity_Gao4 小时前
uni-app VOD 与 COS 选型、开发笔记
前端·笔记·uni-app
我狸才不是赔钱货5 小时前
前端技术栈全景图:从HTML到现代框架的演进之路
前端·html
百花~6 小时前
前端三剑客之一 HTML~
前端·html
lang201509286 小时前
Spring远程调用与Web服务全解析
java·前端·spring
孤狼warrior8 小时前
爬虫进阶 JS逆向基础超详细,解锁加密数据
javascript·爬虫