React Hooks 系列：useMemo 的解析笔记

2025-03-06 暂无评论

useMemo 是 React 中的一个 Hook，用于在组件渲染过程中缓存计算结果，避免不必要的重复计算，从而优化性能。它特别适用于处理耗时的计算或依赖项变化时才需要重新计算的场景。

基本语法

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

第一个参数：一个函数，返回需要缓存的值。
第二个参数：一个依赖数组，只有当数组中的依赖项发生变化时，useMemo 才会重新计算值。如果依赖项没有变化，useMemo 会返回上一次缓存的值。

使用场景

复杂计算：当组件中有复杂的计算逻辑时，可以使用 useMemo 来避免每次渲染都重新计算。
优化子组件渲染：当父组件传递给子组件的 props 是通过复杂计算得到的，可以使用 useMemo 来避免子组件不必要的重新渲染。

示例

1. 复杂计算

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

function ExpensiveComponent({ a, b }) {
  const result = useMemo(() => {
    console.log('Calculating...');
    return a * b;
  }, [a, b]);

  return <div>Result: {result}</div>;
}

function App() {
  const [a, setA] = useState(2);
  const [b, setB] = useState(3);

  return (
    <div>
      <ExpensiveComponent a={a} b={b} />
      <button onClick={() => setA(a + 1)}>Increment A</button>
      <button onClick={() => setB(b + 1)}>Increment B</button>
    </div>
  );
}

在这个例子中，ExpensiveComponent 中的 result 只有在 a 或 b 发生变化时才会重新计算，避免了每次渲染都执行复杂的计算。

2. 优化子组件渲染

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

function ChildComponent({ value }) {
  console.log('ChildComponent rendered');
  return <div>{value}</div>;
}

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState('');

  const memoizedValue = useMemo(() => {
    console.log('Calculating memoized value...');
    return count * 2;
  }, [count]);

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <ChildComponent value={memoizedValue} />
    </div>
  );
}

在这个例子中，ChildComponent 只有在 count 发生变化时才会重新渲染，即使 inputValue 发生变化，ChildComponent 也不会重新渲染，因为 memoizedValue 是通过 useMemo 缓存的。

注意事项

不要滥用 useMemo：useMemo 本身也有一定的开销，只有在确实需要优化性能时才使用它。对于简单的计算，直接计算可能比使用 useMemo 更高效。
依赖数组：确保依赖数组中的每一项都是必要的，避免遗漏依赖项导致缓存的值不准确。
与 React.memo 的区别：useMemo 用于缓存值，而 React.memo 用于缓存组件。两者可以结合使用来进一步优化性能。

总结

useMemo 是 React 中用于性能优化的重要工具，特别适用于处理复杂计算和优化子组件渲染。合理使用 useMemo 可以显著提升应用的性能，但也要注意不要过度使用，避免引入不必要的复杂性。