React useMemo 实际开发使用小结

基本原理

useMemo 的原理是基于 memoization 技术。当你使用 useMemo 时，它会在组件渲染过程中缓存函数的计算结果，并在下一次渲染时，仅在依赖项（dependencies）发生变化时重新计算。如果依赖项没有发生变化，则直接返回之前缓存的结果，避免不必要的重复计算。

在组件初次渲染时，useMemo 会执行计算函数，并将其返回值存储在内部的缓存中。

在下一次组件渲染时，useMemo 会检查依赖项数组中的每个元素是否与上一次渲染时的对应元素相同。如果依赖项数组中有任何一个元素发生了变化，useMemo 会重新执行计算函数，并更新缓存的结果。

如果依赖项数组中的所有元素在下一次渲染时与上一次渲染时的对应元素都相同，则 useMemo 将直接返回上一次缓存的结果，避免不必要的重复计算。

入参

useMemo 接受两个参数：一个是计算函数（通常是一个匿名函数），另一个是依赖项数组。

jsx

const memoizedValue = useMemo