React hooks — useCallback 功能：记住当前定义的函数，并在下次组件渲染的时候返回之前定义的函数（

useCallback 是 React 中的一个 hooks。

useCallback 的功能：记住当前定义的函数，并在下次组件渲染的时候返回之前定义的函数（不再使用新定义的函数），减少不必要的渲染

useCallBack 参数

回调函数，deps参数发生改变后更新。

被 useCallBack 包裹的函数，会被重新构建并当成 useCallBack 函数的实参传入

deps

一个数组，表示触发回调函数的参数列表 useCallBack 的返回值是一个函数，依赖改变后更新，返回一个新的函数

用法

与 useState 的用法相似，最后会返回一个函数，用一个变量保存此函数
配合子组件的 shouldComponentUpdate 或者 React.memo 来使用（否则可能会出 bug，所以要尽量避免滥用 useCallBack ）
useRef 、 useReducer 也有对应的解决方案

案例

如下代码是一个累加计数器

当 num 的值变化时，useCallback会返回一个新的回调，而不会重复创建 add 函数，从而提升了性能。

import React, { useState, useCallback } from 'react';

function count() {
  const [num, setNum] = useState(0);
  const add = useCallback(() => {
    setCount(num + 1);
  }, [num]);
  
  return (
    <div>
      <p>Count: {num}</p>
      <button onClick={add}>+</button>
    </div>
  );
}