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;
相关推荐
jump_jump12 小时前
超长定时器 long-timeout
前端·javascript·node.js
我登哥MVP13 小时前
HTML-CSS-JS-入门学习笔记
javascript·css·笔记·学习·html
Mintopia13 小时前
架构进阶 🏗 从 CRUD 升级到“大工程师视野”
前端·javascript·全栈
Mintopia13 小时前
小样本学习在 WebAI 场景中的技术应用与局限
前端·人工智能·aigc
光影少年13 小时前
vue生态都有哪些?
前端·javascript·vue.js
一只大头猿13 小时前
基于SpringBoot和Vue的超市管理系统
前端·vue.js·spring boot
用户14567756103713 小时前
告别繁琐操作!Excel合并原来可以这么轻松
前端
itslife14 小时前
vite 源码 - 创建 ws 服务
前端·javascript
懒人Ethan14 小时前
解决一个C# 在Framework 4.5反序列化的问题
java·前端·c#
用户14567756103714 小时前
Excel合并数据太麻烦?这个神器3秒搞定,打工人必备!
前端