大家好，我是前端西瓜哥。我们继续学习 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 的功能很简单，就是每次渲染时，通过判断依赖项是否保持原状，来决定是否使用缓存，来减少一些高昂的运算过程。
