大家好，我是前端西瓜哥。我们继续学习 React Hooks，今天说说 useMemo。

useMemo 用于缓存值。它接受一个回调函数，和一个依赖项数组。

组件第一次渲染时，useMemo 会执行该回调函数，拿到一个初始值。

之后重新渲染时，如果依赖项没变，会使用上一次缓存的值；如果依赖项更新了，就会执行回调函数返回新的值，并将其缓存起来。

const complexCalc = count => {
  // 假装自己很复杂
  return count;
}

const val = useMemo(() => complexCalc(count), [count]);

前面我们学过 useCallback 在表现上，可以看做是 useMemo 的一个返回值为函数的特例。

我们完全可以用 useMemo 来替代 useCallback：

useCallback(fn, deps);
// 等价于
useMemo(() => fn, deps);

对比 Vue 计算属性

说起来，useMemo 很像 Vue 的计算属性（computed）。二者都是在依赖项发生改变时，重新计算出一个值，否则使用缓存。

对于依赖项的处理，Vue 要更智能些，不需要自己维护依赖项数组，Vue 自己能够知道函数的执行使用了哪些响应式属性，一旦改变就更新计算属性。

但缺点是不能监听非响应式属性的更新，也不能做到忽视掉一些依赖项的变化。只要一个变了就一定会执行函数来更新。

对于编写 useMemo 时可能不小心漏掉依赖项的问题，可以通过使用 React 官方提供的 eslint 插件提示来解决。

总的来说，我觉得 React 的 useMemo 更胜一筹，不，简直完胜。

结尾

useMemo 的功能很简单，就是每次渲染时，通过判断依赖项是否保持原状，来决定是否使用缓存，来减少一些高昂的计算过程。