- father::useCallback
梗概
回调函数中不要直接使用状态（state）是 useCallback 使用的最佳实践之一，这样可以避免不必要的依赖项声明，简化代码并提高性能。
使用说明
回调函数中不使用 state 的优势
- 使用 useCallback 时，不需要将 state 添加到依赖数组中
- 减少因 state 变化导致的回调函数重新创建
- 简化依赖数组管理，降低遗漏依赖的风险
实例比较
不推荐做法
const Component = () => {
const [count, setCount] = useState(0);
// 不推荐：回调函数内部直接使用状态
const handleClick = useCallback(() => {
const newCount = count + 1;
setCount(newCount);
}, [count]); // 必须添加 count 作为依赖
return <button onClick={handleClick}>增加</button>;
};推荐做法
const Component = () => {
const [count, setCount] = useState(0);
// 推荐：使用函数式更新，不依赖外部 state
const handleClick = useCallback(() => {
setCount(prevCount => prevCount + 1);
}, []); // 空依赖数组，回调函数不会重新创建
return <button onClick={handleClick}>增加</button>;
};相关概念
- 函数式更新：React 的 setState 和 useState 的更新函数可以接收一个函数，该函数以先前的状态作为参数并返回更新后的状态
- 闭包陷阱：在依赖项不完整时，回调函数可能会捕获到过时的状态值