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

  • 基本数据类型的比较:只要值相同,组件不会重新渲染。
  • 引用数据类型的比较:如果引用相同,组件不会重新渲染;如果引用不同(无论内容是否相同),组件会重新渲染。
相关推荐
山河木马30 分钟前
前端学习C++之:.h(.hpp)与.cpp文件
前端·javascript·c++
2401_8919573131 分钟前
list的一些特性(C++)
开发语言·c++
努力只为躺平35 分钟前
一文搞懂 Promise 并发控制:批量执行 vs 最大并发数,实用场景全解析!
前端·javascript
Web小助手37 分钟前
大保剑:Promise的有趣体验
javascript
李大玄37 分钟前
Google浏览器拓展工具 "GU"->google Utils
前端·javascript·github
爱编程的喵37 分钟前
从DOM0到事件委托:揭秘JavaScript事件机制的性能密码
前端·javascript·dom
二十雨辰41 分钟前
[尚庭公寓]07-Knife快速入门
java·开发语言·spring
Python大数据分析@43 分钟前
Origin、MATLAB、Python 用于科研作图,哪个最好?
开发语言·python·matlab
sunbyte1 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ContentPlaceholder(背景占位)
前端·javascript·css·vue.js·tailwindcss
编程零零七1 小时前
Python巩固训练——第一天练习题
开发语言·python·python基础·python学习·python练习题