使用 useMemo 和 React.memo 优化 React 组件渲染

在 React 中,性能优化是一个重要的主题,特别是在复杂的组件树中。本文将演示如何在同一个父组件中使用 useMemoReact.memo 来优化子组件的渲染。

1. 组件结构

创建一个父组件,包含两个子组件:

  • MemoChild: 使用 React.memo 进行优化。
  • ExpensiveChild: 使用 useMemo 缓存。

示例:

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

// 子组件,使用 React.memo
const MemoChild = React.memo(({ data }) => {
  console.log('MemoChild rendered');
  return <div>{data}</div>;
});

// 子组件,使用 useMemo 缓存
const ExpensiveChild = ({ data }) => {
  console.log('ExpensiveChild rendered');
  return <div>{data}</div>;
};

// 父组件
function Parent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState('Initial Data');

  // 使用 useMemo 来缓存 ExpensiveChild
  const memoizedExpensiveChild = useMemo(() => {
    console.log('Calculating ExpensiveChild');
    return <ExpensiveChild data={data} />;
  }, [data]);

  return (
    <div>
      <h1>Parent Component</h1>
      <MemoChild data={`Count: ${count}`} />
      {memoizedExpensiveChild}
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setData('New Data')}>Update Data</button>
    </div>
  );
}

export default Parent;

2. 组件功能解析

MemoChild

  • 使用 React.memo 包裹,只有当其 data 属性变化时才会重新渲染。

ExpensiveChild

  • 普通的子组件,父组件使用 useMemo 来缓存其实例。
  • 只有当 data 属性变化时,useMemo 会重新计算并返回新的组件实例。

Parent

  • 管理两个状态:countdata
  • 点击"Increment Count"按钮时,只有 MemoChild 会更新,而 ExpensiveChild 的引用保持不变。
  • 点击"Update Data"按钮时,ExpensiveChild 会重新渲染,因为 data 发生了变化。

3. 运行结果

点击"Increment Count"按钮

  • count 状态更新,MemoChild 会重新渲染,控制台输出:

    复制代码
    MemoChild rendered
  • ExpensiveChild 不会重新渲染,控制台不会输出。

点击"Update Data"按钮

  • data 状态更新,ExpensiveChild 会重新渲染,控制台输出:

    复制代码
    Calculating ExpensiveChild
    ExpensiveChild rendered

4. useMemoReact.memo 对比:

useMemo

  • Hook钩子函数,用于缓存计算结果。只有当依赖项变化时,才会重新计算。
  • 使用useMemo 缓存 ExpensiveChild 实例,避免不必要的重新渲染。

React.memo

  • 高阶组件,缓存组件的渲染结果。只有当传入的 props 发生变化时,组件才会重新渲染。
  • 适用于根据 props 变化控制渲染的场景。

5. 渲染逻辑总结

基本数据类型(如 numberstringboolean

  • 当组件的 props 是基本数据类型时,如果其值未发生变化,React.memo 不会重新渲染组件。

引用数据类型(如 objectarray

  • 当组件的 props 是引用数据类型时,React.memo 会进行浅比较。
  • 如果引用相同,组件不会重新渲染;如果引用不同,组件会重新渲染。

6. 关键点

  • 基本数据类型的比较:只要值相同,组件不会重新渲染。
  • 引用数据类型的比较:如果引用相同,组件不会重新渲染;如果引用不同(无论内容是否相同),组件会重新渲染。
相关推荐
郝学胜-神的一滴几秒前
Linux命令行的核心理念与实用指南
linux·运维·服务器·开发语言·程序人生
qq_433554545 分钟前
C++ Dijkstra堆优化算法
开发语言·c++·算法
前端小巷子8 分钟前
JS 打造「放大镜 + 缩略图」一体组件
前端·javascript·面试
知识分享小能手13 分钟前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
boonya22 分钟前
Java内存模型与线程私有共享区域与直接内存的理解
java·开发语言·内存模型
qq_1728055923 分钟前
Go 语言 PDF 生成库综合比较与实践指南
开发语言·golang·pdf
UrSpecial1 小时前
Linux线程同步与互斥
linux·开发语言·c++
LeaderSheepH1 小时前
Java自定义比较器详解
java·开发语言
七夜zippoe1 小时前
缓存三大劫攻防战:穿透、击穿、雪崩的Java实战防御体系(二)
java·开发语言·缓存
古夕1 小时前
前端文件下载的三种方式:a标签、Blob、ArrayBuffer
前端·javascript·vue.js