useMemo 的技术细节

useMemo 是 React 的一个钩子，它用于对计算结果进行记忆。当你有一些计算代价较高的操作时，useMemo 可以帮助你避免在每次渲染时都重新计算，从而提升性能。

工作原理

• useMemo(() => computeExpensiveValue(a, b), [a, b]) 接受一个“创建”函数和一个依赖项数组。
• 如果依赖项数组中的任何一个依赖项发生了变化，React 将重新调用“创建”函数来计算新的值；如果没有变化，React 将返回上一次计算的值。
• 当 useMemo 的依赖数组为空时，它实际上意味着这个记忆化的值仅在组件首次渲染时计算一次，并在组件的后续渲染中始终返回这个初始计算的值。依赖数组为空表示没有任何依赖项会触发重新计算，因此计算结果在组件的整个生命周期内保持不变。
  想象 useMemo 像是一个聪明的助手，它记住了你上次做复杂计算的结果。每次你需要这个结果时，如果输入（依赖项）没变，它就直接给你上次的答案，而不是重新计算一遍。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

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

  // 一个复杂的计算函数
  const expensiveComputation = (num) => {
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += num;
    }
    return result;
  };

  // 使用useMemo来记忆这个计算结果
  const computedValue = useMemo(() => expensiveComputation(count), [count]);

  return (
    <div>
      <p>{computedValue}</p>
      <button onClick={() => setCount(c => c + 1)}>增加</button>
    </div>
  );
};

export default MyComponent;

在这个例子中，只有当 count 改变时，expensiveComputation 函数才会被重新调用。否则，它将返回上一次计算的结果。

思考

useMemo 和 useCallback有什么不同？ (理解React中的useCallback)
usememo 是缓存一个具体的值，usecallback 是缓存一个函数

在哪些情况下不应该使用 useMemo,而哪些情况应该使用呢？
不应使用 useMemo 的情况:

• 计算不复杂: 当计算代价不大，即使在每次渲染时重复进行也不会显著影响性能时，使用 useMemo 可能是过度优化。
• 依赖项频繁变化: 如果 useMemo 的依赖项经常变化，导致记忆化值频繁重新计算，这样使用 useMemo 反而会增加性能负担而非减轻。
• 优化效果不明显: 如果被记忆化的值用于少数几个组件，且这些组件的渲染不会因此而显著优化，那么使用 useMemo 可能不会带来实际的性能提升。
• 仅用于原始值: 对于简单的原始值（如数字、字符串、布尔值）的计算，由于它们本身就很快，使用 useMemo 通常没有必要。

使用 useMemo 的适当时机:

• 计算复杂且耗时: 当有一些复杂或计算量大的操作，这些操作的结果在多次渲染中可以重用，这时使用 useMemo 可以提高性能。
• 避免不必要的渲染: 当一个组件的子组件仅在某些特定的 prop 发生变化时才需要重新渲染，而这个 prop 是通过复杂计算得出的，使用 useMemo 可以防止不必要的子组件渲染。
• 提高响应性: 在渲染过程中避免执行昂贵的计算，可以使应用更加流畅和响应更快。

memo高阶组件

当用memo包裹组件后，每次渲染前会浅比较组件的prop是否有变化，如果有变化才做重新渲染