useMemo与useCallback

useMemo与useCallback

useMemo和useCallback都可缓存函数的引用或值，从更细的角度来说useMemo则返回一个缓存的值，useCallback是返回一个缓存函数的引用。

useMemo

useMemo的TS定义可以看出，范型T在useMemo中是一个返回的值类型。

type DependencyList = ReadonlyArray<any>;

function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;

下面是useMemo的简单示例，在a和b的变量值不变的情况下，memoizedValue的值不变，在此时useMemo函数的第一个参数也就是computeExpensiveValue函数不会被执行，从而达到节省计算量的目的。

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

把创建函数factory: () => T和依赖项数组deps: DependencyList | undefined作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算memoized 值，这种优化有助于避免在每次渲染时都进行高开销的计算，例如上文的computeExpensiveValue是需要一个大量计算的函数时，useMemo有助于减少性能开销，以防止Js太多次长时间运行计算导致页面无响应。

此外，传入useMemo的函数会在渲染期间执行，所以不要在这个函数内部执行与渲染无关的操作，诸如副作用这类的操作属于 useEffect的适用范畴，而不是useMemo。如果没有提供依赖项数组，useMemo在每次渲染时都会计算新的值。

eslint的eslint-plugin-react-hooks中的exhaustive-deps规则可以在添加错误依赖时发出警告并给出修复建议。

相比较于useEffect看起来和Vue的Watch很像，但是思想方面是不同的，Vue是监听值的变化而React是用以处理副作用。在useMemo方面就和Vue的computed非常类似了，同样都属于缓存依赖项的计算结果，当然在实现上是完全不同的。

useCallback

useCallback的TS定义可以看出，范型T在useCallback中是一个返回的函数类型。

type DependencyList = ReadonlyArray<any>;

function useCallback<T extends (...args: any[]) => any>(callback: T, deps: DependencyList): T;

下面是useCallback的简单示例，在a和b的变量值不变的情况下，memoizedCallback的函数引用不变，在此时useCallback函数的第一个参数不会被重新定义，即引用的依旧是原函数，从而达到性能优化的目的。

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

把内联回调函数callback: T及依赖项数组deps: DependencyList作为参数传入 useCallback，它将返回该回调函数的memoized版本，该回调函数仅在某个依赖项改变时才会更新，将回调函数传递给经过优化的并使用引用相等性去避免非必要渲染(例如 shouldComponentUpdate)的子组件时，它将非常有用。此外，useCallback(fn, deps)相当于useMemo(() => fn, deps)，由此useCallback可以看作useMemo的语法糖。

eslint的eslint-plugin-react-hooks中的exhaustive-deps规则可以在添加错误依赖时发出警告并给出修复建议。

在useCallback的应用方面，在这里引用一下 @松松 给出的例子，一般Js上创建一个函数需要的时间并不至于要缓存的程度，那为什么要专门给缓存函数的创建做一个语法糖呢，这就跟React.memo有关系了。React.memo的默认第二参数是浅对比shallow compare上次渲染的props和这次渲染的props，如果你的组件的props中包含一个回调函数，并且这个函数是在父组件渲染的过程中创建的(见下例)，那么每次父组件(下例中的<MyComponent />）渲染时，React是认为你的子组件(下例中的<Button />)props是有变化的，不管你是否对这个子组件用了React.memo，都无法阻止重复渲染。这时就只能用useCallback来缓存这个回调函数，才会让React(或者说Js)认为这个prop和上次是相同的。

// 下面三种方法都会在MyComponent渲染的过程中重新创建这个回调函数
// 这样都会引起Button的重新渲染 因为Button的props变化了
function MyComponent() {
  return <Button onClick={() => doWhatever()} />;
}

function MyComponent() {
  const handleClick = () => doWhatever();
  return <Button onClick={handleClick} />;
}

function MyComponent() {
  function handleClick(){
    doWhatever();
  }
  return <Button onClick={handleClick} />;
}

// 只有使用useCallback， 才会导致即使MyComponent渲染，也不重新创建一个新的回调函数
// 这样就不会引发Button的重新渲染 因为Button的props没变
function MyComponent() {
  const handleClick = React.useCallBack(() => doWhatever(), []);
  return <Button onClick={handleClick} />;
}

最后

关于useMemo与useCallback是否值得尽量多用，私认为并不应该这么做，如果在性能优化方面非常有效，值得在每个依赖或者函数都值得使用useMemo与useCallback的话，React可以干脆将其作为默认的功能，又可以减少用户使用Hooks的心智负担，又可以减少使用Hooks的包裹让代码更加简洁，可是React并没有这么做，实际上这仍然是一个权衡的问题，权衡性能优化的点，取一个折衷，具体来说就是你需要评估你组件re-render 的次数和代价，React.memo、useMemo与useCallback这些缓存机制也是有代价的，需要做好平衡，不能盲目的多用这类缓存优化方案，比起盲目的进行各种细微的优化，分析清楚性能问题出现的原因才能真正的解决问题。

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.zhihu.com/question/428921970
https://www.zhihu.com/question/390974405
https://juejin.cn/post/6844904032113278990
https://juejin.cn/post/6844904001998176263
https://segmentfault.com/a/1190000039405417
https://www.infoq.cn/article/mm5btiwipppnpjhjqgtr
https://zh-hans.reactjs.org/docs/hooks-reference.html