react useMemo 原理

React 的 useMemo 和 useCallback 都是为了优化 React 中的性能而设计的。

useMemo 的原理是利用 memoization（记忆化）技术将函数的结果缓存起来。在依赖项没有发生变化的情况下， useMemo 会直接返回缓存的结果，避免了重复计算的问题。当依赖项发生变化时， useMemo 会重新执行函数，并缓存新的结果。

useMemo 接收两个参数：第一个参数是一个回调函数（要被缓存的函数），第二个参数是一个数组，表示函数所依赖的变量。如果没有依赖项，则可以将其省略，useMemo 将不会重复计算。

例如，下面的代码演示了如何使用 useMemo 缓存一个计算结果：

const memoizedValue = useMemo(() => {
  // 计算结果
  return someExpensiveComputation(a, b);
}, [a, b]);

上面的代码中，仅当 a 或 b 发生变更时，useMemo 才会重新执行回调函数，否则会直接返回缓存的结果 memoizedValue。

总的来说，useMemo 可以有效地优化 React 应用程序的性能，在遇到性能问题时可以考虑使用。