React Hooks - useCallback

useCallback介绍

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

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

useCallback简单理解

• 是一个hook
• 用于react性能优化
• 返回值是一个 回调函数
• 当依赖项里面的数据变化时才执行然后返回新的函数；如果依赖项里面的数据不变时，就不会执行，返回值是上一次缓存的函数

useCallback 和 useMemo的区别

• useMemo 缓存的结果是回调函数中return回来的值;主要用于缓存计算结果的值
• useCallback 缓存的结果是函数，主要用于缓存函数;主要用于缓存函数;函数式组件每次任何一个state发生变化，会触发整个组件更新，一些函数是没有必要更新的，此时就应该缓存起来，提高性能，减少对资源的浪费