在使用父子组件嵌套时 父组件调用setState时状态 发生改变 子组件也会无条件的执行函数 如函数中带有发送请求，就会造成很大的性能浪费，所以将要调用的函数用 useMemo 包裹起来 ，第二个参数有很大作用 只有在参数改变时才会再次执行此函数

useMemo 的应用

useMemo 与 useCallback 很像，根据上述 useCallback 已经可以想到 useMemo 也能针对传入子组件的值进行缓存优化。

useMemo 第一个参数接受函数 第二个参数为数组

const xiaohong = fn () 改为

const xiaohong = useMemo（ （）=> fn () , [ count ] )

可以把一些昂贵的计算逻辑放到 useMemo 中，只有当依赖值发生改变的时候才去更新。 const num = useMemo(() => { let num = 0; // 这里使用 count 针对 num 做一些很复杂的计算，当 count 没改变的时候，组件重新渲染就会直接返回之前缓存的值。 return num; }, [count]);

return

结语

简单理解呢 useCallback 与 useMemo 一个缓存的是函数，一个缓存的是函数的返回就结果。useCallback 是来优化子组件的，防止子组件的重复渲染。useMemo 可以优化当前组件也可以优化子组件，优化当前组件主要是通过 memoize 来将一些复杂的计算逻辑进行缓存。当然如果只是进行一些简单的计算也没必要使用 useMemo，这里可以考虑一些计算的性能消耗和比较 inputs 的性能消耗来做一个权衡（如果真有逻辑跟这个比较逻辑差不多，也没必要使用 useMemo ，还能减少一点对键盘磨损 😅）。