React Hooks 如何持久化保存局部变量：深入理解闭包机制-js教程

react 函数组件每次渲染都会重新执行，但 usestate 等 hook 能让状态变量在多次渲染间保持存活——这并非依赖常规局部变量，而是通过 javascript 闭包与 react 内部 fiber 节点协同实现的状态持久化。

在 React 中，函数组件（如 App）看似每次调用都是“全新执行”，其内部声明的变量（如 counter 和 setCounter）理应在函数返回后被销毁。然而，useState 的魔法正在于它不将状态存储在函数作用域内，而是在 React 的内部数据结构（Fiber 节点）中持久化保存，同时返回的 setCounter 是一个绑定到该 Fiber 节点的闭包函数。

来看这段代码：

function App() {
  const [counter, setCounter] = useState(0);
  return (
     setCounter(counter + 1)}>
      {counter}
    
  );
}

表面上看，counter 是 App 函数的局部变量，但它实际是 useState 从当前组件对应的 Fiber 节点中读取的最新值；而 setCounter 并非普通函数，它是一个携带了「目标 Fiber 节点引用」和「更新队列调度逻辑」的闭包。当点击按钮触发 onClick 回调时，() => setCounter(counter + 1) 这个箭头函数本身也构成闭包——它捕获的是本次渲染快照中的 counter 值（即所谓的 stale closure 问题根源），而 setCounter 则负责将新值写入 Fiber 节点，并触发下一次重新渲染。

✅ 正确理解要点：