react hooks （五）useCallback

useCallback 是 React 提供的一个 Hook 函数，用于缓存需要在组件中多次调用的回调函数。它接受两个参数：回调函数和依赖数组。当依赖数组中的任何一个值发生变化时，useCallback 将会返回一个新的回调函数，否则将会返回之前缓存的回调函数。这样可以避免在每次渲染时都重新生成回调函数，从而提高组件的性能。

import { useCallback } from 'react';

function Test(props) {
  const handleClick = useCallback(() => {
    console.log('点击成功');
  }, []);

  return (
    <button onClick={handleClick}>Click me</button>  //此事件会多次调用
  );
}

上例中useCallback接收的数组为空，所以 handleClick 变量会指向同一个回调函数即（handleClick），从而避免了在组件重新渲染时重新创建函数对象。

如果传入数组不为空，则会根据数组依赖项进行更新

import { useState, useCallback } from 'react';

function Test(props) {
  const [count, setCount] = useState(0);

  const btnClick = useCallback(() => {
    console.log(`已经点击了 ${count}次`);
  }, [count]);

  return (
    <>
      <div>Count: 已经点击了{count}次</div>
      <button onClick={() => setCount(count + 1)}>点击加一</button>
      <button onClick={btnClick}>点击触发</button>
    </>
  );
}