react hooks 闭包陷阱 举例说明

React Hooks的闭包陷阱通常发生在使用`useState`或`useCallback`等状态管理Hook时，如果没有妥善处理，可能会导致组件内部的回调函数引用了外部的状态变量，而当状态改变时，这个回调可能不会更新，这被称为“记忆的闭包”或“闭包副作用”。

例如，考虑下面的简单例子：

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

  // 这是一个有问题的自定义钩子
  const handleClick = useCallback(() => {
    console.log(count); // 如果 count 改变，handleClick 会保留旧值
  }, [count]); 

  useEffect(() => {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  }, []);

  return (
    <button onClick={handleClick}>点击计数</button>
  );
}

在这个例子中，`handleClick`会被缓存，即使`count`的值已经改变，`handleClick`依然会打印出最初设置的值。为了避免这个问题，你需要确保回调依赖于所有可能影响它的状态变化，比如：

const handleClick = useCallback(() => {
  console.log(count); // 更新这里的回调依赖，使其能响应 count 的变化
}, [count]);