react 函数组件每次渲染都会重新执行，但 usestate 等 hook 能让状态变量在多次渲染间保持存活——这并非依赖常规局部变量，而是通过 javascript 闭包与 react 内部 fiber 节点协同实现的状态持久化。
在 React 中，函数组件（如 App）看似每次调用都是“全新执行”，其内部声明的变量（如 counter 和 setCounter）理应在函数返回后被销毁。然而，useState 的魔法正在于它不将状态存储在函数作用域内，而是在 React 的内部数据结构（Fiber 节点）中持久化保存，同时返回的 setCounter 是一个绑定到该 Fiber 节点的闭包函数。
来看这段代码：
function App() {
const [counter, setCounter] = useState(0);
return (
);
}表面上看，counter 是 App 函数的局部变量，但它实际是 useState 从当前组件对应的 Fiber 节点中读取的最新值；而 setCounter 并非普通函数，它是一个携带了「目标 Fiber 节点引用」和「更新队列调度逻辑」的闭包。当点击按钮触发 onClick 回调时，() => setCounter(counter + 1) 这个箭头函数本身也构成闭包——它捕获的是本次渲染快照中的 counter 值（即所谓的 stale closure 问题根源），而 setCounter 则负责将新值写入 Fiber 节点，并触发下一次重新渲染。
✅ 正确理解要点：
- useState 的初始值仅用于首次渲染；后续 counter 的值由 React 从内部状态树中读取，而非函数作用域变量；
- setCounter 是 React 创建的、与当前组件强绑定的调度函数，其内部始终能访问到最新的 Fiber 节点；
- 每次渲染生成的新闭包（如事件回调）捕获的是该次渲染时刻的 counter 快照，因此若需最新值，应使用函数式更新：setCounter(c => c + 1)。
⚠️ 注意事项：
- 避免在事件处理中直接依赖闭包捕获的旧状态（尤其在异步场景下），优先使用函数式更新；
- 不要试图在子组件中独立管理父组件关心的状态——应遵循“状态提升”原则，由父组件持有状态并通过 props 和回调函数向下传递；
- 闭包不是 React 的“黑魔法”，而是 JavaScript 基础机制；React 的真正创新在于将闭包与可预测的状态调度、渲染协调深度结合。
简言之：React 函数组件的“状态不丢失”，靠的不是变量没被销毁，而是 React 主动接管了状态生命周期——闭包只是让更新逻辑能安全访问到调度入口，真正的状态存于 React 的内存模型之中。
