Obsidian_Note/随时随地/简单的 React 思考 - useCallback和useMemo.md

简单的 React 思考: useCallback / useMemo

useCallback 和 useMemo 都是 React 里边比较简单的 Hook，先看看官网对于这两个 Hook 的介绍。

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

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

useCallback 会返回一个 memoized 函数，而 useMemo 会返回一个 memoized 值 他们的第二个参数接受一个依赖项数组，回调函数只会在依赖项发生改变的时候才会更新，它的比较算法和 Object.is 的一致，即引用对比。 他们都是作为性能优化的一个方法提供，他们的不同之处在于，useCallback 返回一个函数，而useMemo 会返回一个值，这个值由传入 useMemo 的回调函数在渲染期间执行。

上 React 源码，结合简单的 React 思考 - Fiber 创建一起看

useCallback !

useCallback 在 mount 和 update 阶段都会对 deps 也就是依赖项做简单的 underfined 判断，在 update 的时候会用 areHookInputsEqual 对依赖项做对比，如果依赖项没有变就返回 memorizedState 中存储的回调函数

useMemo !

和 useCallback 相同，useMemo 也会在 mount 和 update 的时候对 deps 依赖项参数做简单的underfined 判断，但是与 useCallback 在 mounte 阶段直接将 函数和 deps 一起存入 memoizedState 不同，useMemo 会执行传入的回调函数，并将函数的返回值和 deps 一起存入memoizedState，在 update 阶段的处理和 useCallback 几乎是一样的。