useCallback使用案例

1. 优化子组件性能

假设有一个父组件 `Parent`，它包含一个子组件 `Child`，并且每当 `Parent` 组件更新时，都会重新渲染 `Child` 组件。但是，`Child` 组件只需要在它的 props 发生变化时才需要重新渲染，而不是在 `Parent` 组件更新时。

使用 `useCallback` 可以缓存 `Child` 组件的回调函数，以便只有当 `Parent` 组件的 `count` 发生变化时才会重新创建。

function Parent() {
  const [count, setCount] = useState(0);
  const handleOnClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <Child onClick={handleOnClick} />
    </div>
  );
}

function Child({ onClick }) {
  console.log("Child component is re-rendered");
  return <button onClick={onClick}>Click me</button>;
}

2. 避免不必要的副作用

在 React 中，副作用是指在组件渲染期间对外部环境进行的操作，例如异步请求、订阅和取消订阅等。如果没有正确地管理副作用，可能会引发一些难以调试的问题。

使用 `useCallback` 可以确保副作用只在依赖项发生变化时触发，避免不必要的副作用。

function Parent() {
  const [count, setCount] = useState(0);
  const [data, setData] = useState(null);

  const fetchData = useCallback(async () => {
    const result = await fetch("https://api.example.com/data");
    setData(result);
  }, []);

  useEffect(() => {
    fetchData();
  }, [fetchData]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

在这个例子中，`fetchData` 函数只在组件挂载时执行一次。由于 `fetchData` 不依赖任何状态，因此我们可以将它作为 `useCallback` 的第二个参数传递一个空数组，以避免不必要的副作用。