精读React hook（七）：用useMemo来减少性能开销

BigYe程普2023-09-11 16:31

在前端框架的激烈竞争中，性能往往被视为评判一个框架好坏的关键指标。拥有卓越性能的框架可以为开发者在面对数据密集或高度交互的应用时，提供更加流畅、高效的开发体验。

为了更好地满足开发者对于细粒度性能控制的需求，React推出了useMemo这一Hook。这个工具为我们在函数组件内部提供了一个优雅的手段，允许我们针对复杂的计算进行精细化的优化，从而避免不必要的渲染重复。接下来的文章，我们将深入探讨useMemo的定义、使用方法以及如何在日常开发中最大化地发挥其潜力。

useMemo定义

useMemo是React框架中的一个重要Hook，它的核心目的是通过缓存计算结果，避免在组件渲染时进行不必要的重复计算，从而优化性能。这意味着只有当其依赖项发生变化时，useMemo才会重新计算这个值，否则它将重用之前的结果。

它的基本使用格式如下：

jsx 复制代码 
const cachedValue = useMemo(calculateValue, dependencies)
  • calculateValue：这是一个用于计算我们想要缓存的值的函数。为了确保结果的稳定性和预测性，这个函数应该是一个纯函数。这意味着，它在相同的输入下总是返回相同的输出，并且没有任何副作用。
  • dependencies：这是一个数组，包含useMemo所依赖的变量或值。当数组中的任何值发生变化时，calculateValue函数将被重新执行。

**useMemo基础用法

useMemo 接受两个参数：一个函数和一个依赖项数组。

jsx 复制代码 
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

在上面的例子中，computeExpensiveValue是一个可能需要很长时间来计算的函数。我们只有当a或b改变时，才重新调用这个函数。否则，我们会使用之前缓存的值。

用一个例子来看useMemo的执行时机：

jsx 复制代码 
import React, { useMemo, useState } from "react";

function filterUsers(users, searchTerm) {
    return users.filter((user) => user.name.includes(searchTerm));
}

function useMemoDemo() {
    const [searchTerm, setSearchTerm] = useState("");
    const [isDark, setIsDark] = useState(false);

    const allUsers = useMemo(() => {
        let list = [];
        for (let i = 1; i <= 500; i++) {
            list.push({ id: i, name: `User${i}` });
        }
        return list;
    }, []);

    const useMemoCurrentUsers = useMemo(() => {
        console.log('with useMemo')
        return filterUsers(allUsers, searchTerm);
    }, [allUsers, searchTerm]);

    return (
        <div>
            {/* 每一次更改查询框内容，都会触发useMemo */}
            <input
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Search by name..."
            />

            {/* 每一次更改背景色，都不会触发useMemo */}
            <button onClick={() => setIsDark((pre) => !pre)}>
                {isDark ? "Dark mode" : "Light mode"}
            </button>

            <div>
                <div>
                    <h2>With useMemo</h2>
                    <div style={{ background: isDark ? "#000" : "" }}>
                        {useMemoCurrentUsers.map((user) => (
                            <div key={user.id}>
                                {user.name}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default useMemoDemo;

在这里简单的示例中，每次修改查询框的内容，都会触发searchTerm的变化，进而触发useMemo重新计算；而点击切换背景色的按钮，因为useMemo的依赖项没有更新，所以不会触发useMemo重新计算，而是直接使用上一次计算的返回值。

是否使用useMemo的区别

使用 useMemo 与否，究竟有何差异？很遗憾，得益于高效的现代 JavaScript 引擎和优秀的浏览器性能，大多数场景下，我们用肉眼几乎无法看出来区别。例如下面这个示例，你也可以到我的演示站体验。

jsx 复制代码 
import React, { useMemo, useState } from "react";

function filterUsers(users, searchTerm) {
    return users.filter((user) => user.name.includes(searchTerm));
}

function Comparison1() {
    const [searchTerm, setSearchTerm] = useState("");
    const [isDark, setIsDark] = useState(false);

    const allUsers = useMemo(() => {
        let list = [];
        for (let i = 1; i <= 500; i++) {
            list.push({ id: i, name: `User${i}` });
        }
        return list;
    }, []);

    const useMemoCurrentUsers = useMemo(() => {
                             console.log('with useMemo')
        return filterUsers(allUsers, searchTerm);
    }, [allUsers, searchTerm]);

            console.log('without useMemo')
    const withoutUseMemoCurrentUsers = filterUsers(allUsers, searchTerm);

    return (
        <div>
            <input
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                placeholder="Search by name..."
            />

            <button onClick={() => setIsDark((pre) => !pre)}>
                {isDark ? "Dark mode" : "Light mode"}
            </button>

            <div>
                <div>
                    <h2>With useMemo</h2>
                    <div style={{ background: isDark ? "#000" : "" }}>
                        {useMemoCurrentUsers.map((user) => (
                            <div key={user.id}>
                                {user.name}
                            </div>
                        ))}
                    </div>
                </div>
                <div>
                    <h2>Without useMemo</h2>
                    <div style={{ background: isDark ? "#000" : "" }}>
                        {withoutUseMemoCurrentUsers.map((user) => (
                            <div key={user.id}>
                                {user.name}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Comparison1;

这个示例实际效果是无论你修改查询框内容还是切换背景色，对照组的变化几乎是同步的。

既然useMemo无法带来视觉上的差异，我们为什么还要使用useMemo？因为useMemo的可以在更细粒度的层面优化我们的应用性能：

  1. 重新计算的开销：

    当我们面对涉及大量数据处理、循环或其他复杂逻辑的场景时，重复不必要的计算可能会导致浏览器的卡顿，从而影响用户体验。

  2. 渲染的开销：

    当我们谈论 React 性能时，经常考虑的不仅仅是计算的速度，但更重要的是避免不必要的渲染。如果某个子组件依赖于一个对象或数组，并且这个对象或数组在每次父组件渲染时都重新创建，即使实际的数据没有改变，那么子组件也会不必要地重新渲染。

    在这种情况下，useMemo可以帮助我们确保对象或数组的引用在数据不变时保持不变，从而避免子组件的不必要渲染。

打开浏览器控制台，我们可以看到页面首次渲染时，useMemoCurrentUsers和withoutUseMemoCurrentUsers都有进行计算，但是点击切换背景的按钮时，useMemoCurrentUsers没有重新计算，而withoutUseMemoCurrentUsers是每次都重新计算的。这恰好印证了上面所说的"节省渲染开销"。

缓存组件

useMemo的作用不知局限于缓存数据，它还可以缓存组件。

如果你在渲染某个组件时有昂贵的计算，并且你想在某些依赖未改变时避免这些计算，那么也可以使用useMemo来缓存这个组件。用法如下：

jsx 复制代码 
function ParentComponent(props) {
    const [someData, setSomeData] = useState(initialData);

    const MemoizedExpensiveComponent = useMemo(() => {
        return <ExpensiveComponent data={someData} />;
    }, [someData]);

    return (
        <div>
            {MemoizedExpensiveComponent}
            {/* 其他组件和逻辑 */}
        </div>
    );
}

如果上一节的示例，我们想把用户列表的组件缓存起来，可以这么做：

jsx 复制代码 
function UserList({ allUsers, searchTerm }) {
    const filteredUsers = filterUsers(allUsers, searchTerm);
    return (
      <>
          {useMemoCurrentUsers.map((user) => (
              <div key={user.id}>
                  {user.name}
              </div>
          ))}
      </>
    );
}

function Comparison1() {
    // ......

    const MemoizedUserList = useMemo(() => {
        return <UserList allUsers={allUsers} searchTerm={searchTerm} />;
    }, [allUsers, searchTerm]);

    return (
        <div>
           {/* ...... */}
              <h2>With useMemo</h2>
              <div style={{ background: isDark ? "#000" : "" }}>
                  {MemoizedUserList}
              </div>
           {/* ...... */}
        </div>
    );
}

export default Comparison1;

现在，整个UserList组件被缓存，只有当allUsers、searchTerm或isDark发生变化时，才会重新计算。

除了useMemo能够缓存组件，React 还提供了memo这个高阶组件来完成相似的工作。

jsx 复制代码 
const UserList = memo(function UserList({ allUsers, searchTerm }) {
    const filteredUsers = filterUsers(allUsers, searchTerm);
    return (
        <>
          {filteredUsers.map((user) => (
              <div key={user.id}>
                  {user.name}
              </div>
          ))}
        </>
    );
});

function Comparison1() {
      // ......

    return (
        <div>
           {/* ...... */}
            <h2>With useMemo</h2>
            <div style={{ background: isDark ? "#000" : "" }}>
                <UserList allUsers={allUsers} searchTerm={searchTerm} />
            </div>
           {/* ...... */}
        </div>
    );
}

export default Comparison1;

使用memo高阶组件包裹后，只有当props发生变化时重新渲染。这种方式和上面使用useMemo缓存组件的作用是一样的，但代码可读性更强，也是React官方更推荐的方式。

考虑到useMemo和memo的特点，我们可以这么说：

  • 当你想避免因为数据变化 而产生的不必要的计算 时，使用useMemo；
  • 当你想避免因为props未变 而产生的不必要的组件重渲染 时，使用memo。

有无使用memo的效果对比也可以在我的演示站体验。

缓存函数

除了缓存数据和组件，useMemo还能够缓存函数。你只需要在useMemo里return一个函数即可，如下：

jsx 复制代码 
const handleUserClick = useMemo(() => {
  return (userName) => {
    alert(`Clicked on: ${userName}`);
  };
}, []);

不过，React有专门缓存函数的hook------useCallback，也是下一篇文章要精读的hook，所以这里就不展开说了。

反例：过渡优化

useMemo是用于优化的工具，但有时，如果过度使用它们，可能会导致性能更差或代码更加复杂。下面看一个过度优化的例子：

想象这个场景，我们有一个简单的组件，只显示一个数字和一个按钮，点击按钮会增加这个数字。

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

function Counter() {
    const [count, setCount] = useState(0);

    const handleIncrease = useMemo(() => {
        return () => {
            setCount(count + 1);
        };
    }, [count]);

    return (
        <div>
            <div>{count}</div>
            <button onClick={handleIncrease}>Increase</button>
        </div>
    );
}

export default Counter;

这里的问题是：

  1. 不必要的复杂性 ：原始的组件是简单的，并且性能表现得很好。引入useMemo只是增加了代码的复杂性，而并没有带来任何实际的性能提升。
  2. 增加了性能开销 ：useMemo本身 也有开销。在这种情况下，任何由useMemo带来的小优势都被其自身的开销抵消了，因为每次count变化，handleIncrease都会重新计算。
  3. 可读性下降 ：对于后来查看代码的其他开发者来说，看到useMemo可能会引起困惑。他们可能会花费时间思考为什么这里需要优化，尽管实际上并不需要。

综上所述，不是所有的组件都需要优化，特别是当它们已经足够简单和高效的时候。过度使用优化工具可能会导致更差的性能和更低的代码可读性。

结语

使用useMemo的关键是权衡。其目的是避免不必要的计算，但也要注意不要滥用，因为维持这些缓存值也是有开销的。最佳的做法是先写出清晰和可读的代码，然后在性能瓶颈出现时，再考虑优化。

本文对照示例均可在我的演示站体验，TypeScript版源码在我的Github查看

系列文章列表

精读React hook（一）：useState 的几个基础用法和进阶技巧

精读React hook（二）：React状态管理的强大工具------useReducer

精读React hook（三）：useContext从基础应用到性能优化

精读React hook（四）：useRef的多维用途

精读React hook（五）：useEffect使用细节知多少？

精读React hook（六）：useLayoutEffect解决了什么问题？

精读React hook（七）：用useMemo来减少性能开销

未完待续......

相关推荐
卸任32 分钟前
Vibe coding工具使用心得
前端·ai编程
brien91 小时前
为什么模型标称 1M，Google Antigravity 聊到 256K 却突然失忆？我们给它做了个原生行内监控圆环
前端
修炼的dance2 小时前
录屏关键帧间隔多少合适？六档实测，2秒到10秒小了75.6%
前端
Lank_M2 小时前
关键帧从1秒拉到10秒，录屏小87.3%，摄像头小10.8%
前端
补码缩写2 小时前
用 ffprobe 拆录屏，八成字节在 29 个关键帧上
前端
百思不得小李2 小时前
一个复杂的动态表单是如何实现的
前端·设计模式
陈随易2 小时前
Cmder 停更 17 个月，2.0 支持 Windows Terminal
前端·后端·程序员
风骏时光牛马2 小时前
前沿视界
前端
kyriewen2 小时前
我扫了 814 个依赖，97 个还敢要 Node 10
前端·javascript·程序员
陈随易2 小时前
3000 万人在用的翻译插件，重写一遍就是一门生意
前端·后端·程序员
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03如何新建文件夹？ 电脑新建文件夹的4种方法04几个好用的ip纯净度检测网站05GitHub 镜像站点06微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新07昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战08苹果iPA游戏软件资源下载网站09蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接10【SQL Server 2022】保姆级SQL Server 详细图文下载安装教程