Memoized 值的定义和使用

Hook useMemo() 提供了一个创建 Memoized 值的方法，允许对依赖项数组进行监控，仅当依赖项数组发生改变时才重新使用创建函数计算 memoized 值。Memoized 值有助于避免在每次渲染时都进行高开销的计算。useMemo() 的使用格式为 useMemo(fn, deps)。具体使用可参考以下示例。

const value = useMemo(() => computeValue(a, b), [a, b]);

在示例中，当依赖数组 [a, b] 中的任何一个值发生变化，React 都将重新计算新的值。如果不提供依赖数组，那么 React 在每次渲染时都会计算新的值。传入 useMemo() 的函数会在渲染期执行，请记住不要在这里执行任何副作用操作。useMemo() 中的依赖数组并不会被传入创建函数作为参数，所以就目前的 React 版本，不要尝试在创建函数中利用参数来访问依赖数组。

React 并不保证所有的 Memoized 值都能在依赖数组不发生变化时不被计算，例如在离屏组件中，React 会将组件状态从内存中丢弃，并在需要时重新计算，在这种情况下，Memoized 值就不会被记住。所以在编写应用时，可以先不使用 useMemo()，待代码可执行后，再使用 useMemo() 进行优化。

useMemo() 中的创建函数可以返回各式各样的对象，甚至可以被用来跳过子节点的重新渲染，这只需要在创建函数中返回一个组件即可。但是需要注意的是，Hook 调用不能被放置在循环中，如果需要在列表中使用，可以将列表项抽取成一个独立的组件来处理。