React useMemo和useCallback都是为了提升性能的hooks（各自应用场景思考）

一、共同点：

而 useMemo 和 useCallback 可以用来解决函数组件更新过程中的性能问题。

useMemo 和 useCallback 都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变是再次执行。并且这两个 hooks 都是返回缓存的值。useMemo 返回的是缓存的变量，而 useCallback 返回的是缓存的函数。

即：为了避免父组件的props或者state改变，让它的子组件每次均要刷新（前提是父组件的发生变化props或者state可能和子组件的无关），这时候就需要useMemo和useCallback

控制子组件是否有必要重新渲染。

二、useMemo的应用场景：某一个状态需要根据其它状态进行计算时。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

useMemo 传入一个函数和依赖数组，返回一个缓存的变量值

把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

三、useCallback的应用场景：这个用的多，父子组件回调函数用时。

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useCallback 传入一个函数和依赖数组，返回一个缓存后的函数。

把内联回调函数及依赖项数组作为参数传入 useCallback ，它将返回该回调函数的 memoized 版本， 该回调函数仅在某个依赖项改变时才会更新。当你把回调函数传递给经过优化的并使用引用相等性去避 免非必要渲染（例如 shouldComponentUpdate ）的子组件时，它将非常有用。

使用场景是：有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新；但是大多数场景下，更新是没有必要的，我们可以借助useCallback来返回函数，然后把这个函数作为props传递给子组件；这样，子组件就能避免不必要的更新。

四.总结：

一句话：useCallback 缓存钩子函数，useMemo 缓存返回值（计算结果）。

标签：缓存,函数,useMemo,hooks,useCallback,依赖,组件
来源： https://blog.51cto.com/u_10976476/2845733