useCallback 与 useMemo

useCallback 与 useMemo

useCallBack

参数：

1. 一个内联回调函数
2. 依赖项数组

返回值：

• 该回调函数的 memoized 版本（可以理解为该回调函数被缓存起来了）

只有当依赖项发生改变时，这个回调函数才会重新生成。

使用场景举例：

如果你需要将一个函数作为props传给子组件，并且子组件内部进行了一些优化，比如判断一下props改变时才重新渲染。那么就可以将这个函数使用 useCallback 进行缓存，传入这个函数的 memoized 版本。当父组件更新时，这个 memoized 版本的函数是不变的，因此传给子组件的函数也是不变的，子组件就不会重新渲染。

function SubCounter({
     onClick, data }) {
   
  return <button onClick={
   onClick}>{
   data}</button>;
}

const MemoSubCounter = React.memo(SubCounter);
let oldData, oldAddClick;

function Counter1() {
   
  console.log("Counter1 render");
  const [name, setName] = useState("计数器");
  const