React：Hooks函数的局部变量为何能在回调中被访问？

先看你给出的Hook示例：

function App() {
  let [counter, setCounter] = useState(0);
  return <button onClick={() => setCounter(counter + 1)}>{counter}</button>;
}

你提到的疑问核心，本质是**闭包（Closure）**的特性在起作用，和JavaScript的词法作用域、垃圾回收机制直接相关：

• 当React第一次调用App()时，会创建一个执行上下文，里面包含当前的counter（初始值为0）和setCounter（useState返回的状态更新函数）。
• 你定义的onClick箭头函数，会捕获这个执行上下文对应的词法环境——简单说就是，这个回调会记住自己被创建时所在的变量环境，哪怕外层的App函数执行完弹出调用栈，只要这个回调还被引用着，它捕获的词法环境就不会被垃圾回收机制清理。
• 这里的回调被React绑定到了真实DOM按钮的点击事件上，只要按钮还在页面上，这个回调就一直存在，自然能访问到当初捕获的counter和setCounter。

另外补充一点：每次点击按钮调用setCounter后，React会重新执行App()生成新的组件渲染内容，这时候会生成新的counter、setCounter，以及新的回调函数——这个新回调捕获的是新的词法环境里的变量，所以你点击后看到的是更新后的数值，这也是为什么每次更新后回调能拿到最新的状态值。

内容的提问来源于stack exchange，提问作者lch