视频字幕
useMemo 是 React 提供的一个 Hook，用于在函数组件中进行性能优化。它的主要作用是记忆（或者说缓存）一个计算结果的值，只有当其依赖项发生变化时，才会重新计算该值，否则直接返回上次缓存的结果。在这个例子中，我们使用 useMemo 来缓存一个开销较大的计算结果。第一个参数是一个回调函数，用于执行计算并返回结果。第二个参数是依赖项数组，只有当数组中的值发生变化时，React 才会重新执行回调函数。
让我们来看看 useMemo 的工作原理。当组件首次渲染时，React 会执行 useMemo 的计算函数并缓存结果。在后续的每次渲染中，React 会检查依赖项数组中的值是否发生了变化。如果依赖项都没有变化，useMemo 会跳过计算函数的执行，直接返回上次缓存的结果，这样可以避免不必要的计算。如果任何一个依赖项发生了变化，useMemo 会重新执行计算函数，计算新的结果，并更新缓存。这个流程图展示了 useMemo 的工作过程：组件渲染后，React 检查依赖项，如果依赖项未变化，直接使用缓存的结果；如果依赖项变化，则重新执行计算函数并更新缓存。
让我们来看看 useMemo 的适用场景。首先，当你需要执行开销较大的计算时，使用 useMemo 可以避免在每次渲染时都重新计算。例如，复杂的数据处理、排序或过滤大型数组等。其次，当计算结果作为 props 传递给使用了 React.memo 或其他优化手段的子组件时，使用 useMemo 可以确保只有当该值真正变化时，子组件才会重新渲染。第三，当你需要维护引用相等性时，比如创建对象或数组作为依赖项传递给其他 Hook，使用 useMemo 可以确保引用不变。但需要注意的是，不要过度使用 useMemo。记忆化本身也有开销，包括内存占用和依赖项比较的成本。只在确实存在性能瓶颈的地方使用它，而不是作为默认的编程习惯。
让我们比较一下 useMemo 和 useCallback 这两个相似但用途不同的 React Hook。useMemo 用于缓存计算结果的值。它接收一个创建值的函数和一个依赖项数组，返回的是函数计算的结果。useMemo 适用于缓存复杂计算的结果，比如数据处理或过滤。返回值可以是任何类型，包括对象、数组、数字等。而 useCallback 用于缓存函数引用本身，而不是函数的执行结果。它接收一个回调函数和一个依赖项数组，返回的是该回调函数的记忆化版本。useCallback 主要用于将回调函数传递给使用引用相等性优化的子组件，以避免不必要的渲染。返回值必须是函数。实际上，useCallback(fn, deps) 在功能上等同于 useMemo(() => fn, deps)，只是语法更简洁，语义更明确。从代码示例中可以看出它们的区别：useMemo 返回的是计算结果，可以直接使用；而 useCallback 返回的是函数本身，通常用于传递给子组件。
总结一下我们今天学习的内容。useMemo 是 React 提供的一个用于性能优化的 Hook，它的主要作用是缓存计算结果的值。只有当依赖项数组中的值发生变化时，useMemo 才会重新执行计算函数并更新缓存。useMemo 适用于三种主要场景：执行开销较大的计算、避免子组件不必要的重新渲染，以及维护引用相等性。与 useCallback 不同，useMemo 缓存的是计算结果，而 useCallback 缓存的是函数引用本身。需要注意的是，我们应该谨慎使用 useMemo，因为记忆化本身也有开销，包括内存占用和依赖项比较的成本。只在确实存在性能瓶颈的地方使用它，而不是作为默认的编程习惯。通过合理使用 useMemo，我们可以有效提高 React 应用的性能。