使用 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. 关键点

  • 基本数据类型的比较:只要值相同,组件不会重新渲染。
  • 引用数据类型的比较:如果引用相同,组件不会重新渲染;如果引用不同(无论内容是否相同),组件会重新渲染。
相关推荐
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
三小河1 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
Hilaku1 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
云枫晖2 小时前
手写Promise-什么是Promise
前端·javascript
一枚前端小能手2 小时前
📋 前端复制那点事 - 5个实用技巧让你的复制功能更完美
前端·javascript
小高0073 小时前
🌐ES6 这 8 个隐藏外挂,知道 3 个算我输!
前端·javascript·面试
东坡白菜3 小时前
SSE 实现 AI 对话中的流式输出
javascript·vue.js
小桥风满袖4 小时前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
前端人类学4 小时前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise