React项目使用useMemo优化性能指南和应用场景

1. 前言

在 React 应用开发过程中，性能优化是一个绕不开的话题。随着应用功能不断丰富，组件层级日益复杂，很容易出现一些不必要的计算和渲染，导致应用运行卡顿，影响用户体验。而useMemo钩子就是 React 为我们提供的一个强大的性能优化工具，合理使用它，能让我们的应用运行得更加流畅高效。

2. 渲染机制与性能问题

在 React 中，当组件的状态（state）或 props 发生变化时，组件就会重新渲染。这原本是一个很好的机制，能确保页面及时更新展示最新的数据。但如果不加以控制，可能会引发一些性能问题。

比如，在一个复杂的组件中，存在一些计算量较大的函数，每次组件重新渲染时，这些函数都会重新执行，即使相关的数据并没有发生变化。举个简单的例子：

tsx 复制代码

import { useState } from'react';

const ExpensiveCalculation = () => {
  const [count, setCount] = useState(0);

  const calculateSum = () => {
    let sum = 0;
    for (let i = 0; i < 1000000; i++) {
      sum += i;
    }
    return sum;
  };

  const result = calculateSum();

  return (
    <div>
      <p>计算结果: {result}</p>
      <button onClick={() => setCount(count + 1)}>点击增加计数</button>
    </div>
  );
};

在上述代码中，calculateSum函数执行了大量的循环计算，每次点击按钮更新count状态，组件重新渲染时，calculateSum都会重新执行一遍，即使我们并不需要重新计算（因为计算逻辑本身没有依赖的数据变化），这无疑是对性能的浪费。

3. 基本原理与语法

useMemo钩子的作用就是对计算结果进行缓存，只有当依赖项发生变化时，才会重新计算并返回新的结果，否则直接返回上一次缓存的结果。它的语法如下：

jsx 复制代码

import { useMemo } from'react';

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

这里，computeExpensiveValue是一个函数，用于执行具体的计算逻辑，a 和 b 是该计算逻辑所依赖的数据。useMemo会返回computeExpensiveValue函数的执行结果，并将其缓存起来。只有当 a 或 b 发生变化时，computeExpensiveValue函数才会重新执行，否则直接返回缓存的结果。

4. 实际应用场景

在实际应用中，useMemo可以用于以下场景：

4.1 复杂计算结果的缓存

还是以上面的ExpensiveCalculation组件为例，我们可以使用useMemo来优化：

tsx 复制代码

import React, { useState } from'react';

const ExpensiveCalculation = () => {
  const [count, setCount] = useState(0);

  const result = useMemo(() => {
    let sum = 0;
    for (let i = 0; i < 1000000; i++) {
      sum += i;
    }
    return sum;
  }, []);

  return (
    <div>
      <p>计算结果: {result}</p>
      <button onClick={() => setCount(count + 1)}>点击增加计数</button>
    </div>
  );
};

在优化后的代码中，由于useMemo的依赖项数组为空，这意味着只有在组件首次渲染时，computeExpensiveValue函数（即内部的循环计算部分）才会执行一次，后续无论count如何变化，组件重新渲染时，result都会直接返回缓存的结果，避免了大量不必要的计算，提升了性能。

4.2 在列表渲染中优化子组件

当我们在渲染列表时，如果列表项组件接受一些计算后的 props，使用useMemo可以避免子组件不必要的重新渲染。例如：

tsx 复制代码

import React, { useState, useMemo } from'react';

const ListItem = ({ item }) => {
  console.log(`渲染列表项: ${item}`);
  return <li>{item}</li>;
};

const List = () => {
  const [count, setCount] = useState(0);
  const list = [1, 2, 3, 4, 5];

  const memoizedList = useMemo(() => list.map(item => ({ value: item })), [list]);

  return (
    <div>
      <ul>
        {memoizedList.map(({ value }) => (
          <ListItem key={value} item={value} />
        ))}
      </ul>
      <button onClick={() => setCount(count + 1)}>点击增加计数</button>
    </div>
  );
};

在这个例子中，memoizedList使用useMemo进行了处理，在第二个参数数组里监听了list，只有当list数组发生变化时，memoizedList才会重新计算。当我们点击按钮更新count状态时，由于memoizedList没有变化，ListItem组件不会重新渲染，从而提高了列表渲染的性能。

4.3 函数作为 props 传递时的优化

在 React 中，经常会将函数作为 props 传递给子组件。如果这个函数在父组件每次渲染时都重新创建，可能会导致子组件不必要的重新渲染。使用useMemo可以解决这个问题。

tsx 复制代码

import React, { useState, useMemo } from'react';

const ChildComponent = ({ onClick }) => {
  console.log('子组件渲染');
  return <button onClick={onClick}>点击我</button>;
};

const ParentComponent = () => {
  const [count, setCount] = useState(0);

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

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>计数: {count}</p>
    </div>
  );
};

在上述代码中，handleClick函数使用useMemo进行了优化。只有当count发生变化时，handleClick函数才会重新创建，否则在父组件每次渲染时，handleClick都会返回相同的函数实例，避免了ChildComponent因为 props 函数的变化而不必要地重新渲染。

5. 注意事项

正确设置依赖项数组：
- 依赖项数组的设置至关重要，如果遗漏了必要的依赖项，可能会导致缓存的结果不准确；而添加了不必要的依赖项，则会失去useMemo的优化效果。所以，一定要仔细分析计算逻辑真正依赖的数据，准确设置依赖项数组。
不要滥用useMemo：
- 虽然useMemo能优化性能，但也不要过度使用。对于一些简单的计算或者本身更新频率较高的数据，使用useMemo可能带来的性能提升有限，反而会增加代码的复杂性和维护成本。

6. 总结

总之，useMemo钩子是 React 性能优化的有力武器，通过合理运用它，我们可以有效地减少不必要的计算和渲染，提升应用的运行效率。在实际开发中，需要结合具体的业务场景，正确使用useMemo，让我们的 React 应用更加流畅、高效。

本次分享就到这儿啦，我是鹏多多，深耕前端的技术创作者，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

PS：在本页按F12，在console中输入document.getElementsByClassName('panel-btn')[0].click();有惊喜哦~

往期文章