React 中 useCallback 的使用场景是什么？

React 中的 useCallback Hook 可用于缓存函数实例，防止不必要的重新渲染和计算。通过固定依赖项数组的大小和内容，确保函数在相同的输入下保持一致，从而提升应用的性能。

React 中等 Hooks 性能性能优化

useCallback 是 React 提供的 Hook，主要用于缓存函数引用，避免在组件渲染时反复创建新的函数实例，从而优化性能。具体使用场景包括：

防止子组件不必要的渲染
当函数作为 prop 传递给子组件，且子组件使用了 React.memo() 来避免无用渲染时，使用 useCallback 可缓存该函数。

示例代码：

import React, { useCallback, useState, memo } from 'react';
     
const ChildComponent = memo(({ onClick }) => {
  console.log('Child rendered'); // 仅当相关 props 变化时才渲染
  return <button onClick={onClick}>Click Me</button>;
});
     
function ParentComponent() {
  const [count, setCount] = useState(0);
     
  const handleClick = useCallback(() => {
    console.log('Clicked!');
  }, []);
     
  return <ChildComponent onClick={handleClick} />;
}

优化 effects 的依赖项
避免 useEffect 或 useMemo 的依赖项频繁变化导致无限循环或不必要计算。

示例代码：

const MyComponent = () => {
  const [value, setValue] = useState('');
  const fetchData = useCallback(async () => {
    // 数据获取逻辑
  }, [dependency]); // 依赖项控制重创建
     
  useEffect(() => {
    fetchData();
  }, [fetchData]); // 仅在 fetchData 变化时触发
};

闭包变量保护
在函数中引用 state 或其他值时，确保变量不过时导致预期外行为。

示例代码：

const Counter = () => {
  const [count, setCount] = useState(0);
     
  const increment = useCallback(() => {
    setCount(prev => prev + 1); // 稳定函数处理实时 state
  }, []);
     
  return <button onClick={increment}>+</button>;
};

在这些场景中，应谨慎选择依赖项数组以平衡性能和正确性。