面试题：React中useMemo Hook的依赖数组深度分析及性能影响

依赖数组为空数组

性能影响：useMemo 会在组件初始渲染时计算一次值，并在后续渲染中始终返回该缓存值，不会因为组件重新渲染而重新计算。这可以避免在每次渲染时都执行昂贵的计算，提升性能。
示例：

import React, { useMemo } from 'react';

const ExpensiveCalculation = () => {
  const calculateValue = () => {
    // 模拟昂贵的计算
    let sum = 0;
    for (let i = 0; i < 1000000; i++) {
      sum += i;
    }
    return sum;
  };

  const memoizedValue = useMemo(() => calculateValue(), []);

  return <div>{memoizedValue}</div>;
};

在此例中，无论组件如何重新渲染，calculateValue 只会在组件首次渲染时执行一次。

依赖数组包含部分变量

性能影响：只有当依赖数组中的变量发生变化时，useMemo 才会重新计算值。如果部分相关变量未包含在依赖数组中，可能导致计算的值不是最新的，但如果计算的昂贵操作依赖的关键变量确实未改变，这种设置可以减少不必要的重新计算，一定程度提升性能。
示例：

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

const PartiallyDependentMemo = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const memoizedValue = useMemo(() => count1 + count2, [count1]);

  return (
    <div>
      <p>Memoized value: {memoizedValue}</p>
      <button onClick={() => setCount1(count1 + 1)}>Increment count1</button>
      <button onClick={() => setCount2(count2 + 1)}>Increment count2</button>
    </div>
  );
};

这里 memoizedValue 只依赖 count1，当 count2 变化时，memoizedValue 不会重新计算，可能导致值不准确。

依赖数组包含全部相关变量

性能影响：当依赖数组包含所有与 useMemo 计算相关的变量时，只要任何一个相关变量变化，useMemo 就会重新计算值。这样能保证计算结果始终是最新的，但如果频繁变化，可能会增加计算开销，影响性能。
示例：

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

const FullyDependentMemo = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const memoizedValue = useMemo(() => count1 + count2, [count1, count2]);

  return (
    <div>
      <p>Memoized value: {memoizedValue}</p>
      <button onClick={() => setCount1(count1 + 1)}>Increment count1</button>
      <button onClick={() => setCount2(count2 + 1)}>Increment count2</button>
    </div>
  );
};

此例中，count1 或 count2 任何一个变化，memoizedValue 都会重新计算。

依赖数组设置不当引发的性能问题

计算结果不准确：如依赖数组包含部分变量的例子，如果关键变量未包含在依赖数组中，useMemo 不会重新计算，导致返回的值不是最新的，这在一些需要实时数据的场景下会产生逻辑错误。
不必要的性能开销：如果依赖数组设置为空数组，但计算结果实际依赖某些会变化的变量，那么 useMemo 不会重新计算，使用到该值的逻辑可能出现错误。同时，如果依赖数组包含了过多不必要的变量，会导致 useMemo 频繁重新计算，增加性能开销，降低组件性能。

星途面试题库

面试题：React中useMemo Hook的依赖数组深度分析及性能影响

知识考点

面试题答案

依赖数组为空数组

依赖数组包含部分变量

依赖数组包含全部相关变量

依赖数组设置不当引发的性能问题