使用状态挂钩时，useState() 如何为功能组件检索正确的状态对象和函数？ [复制]答案

【问题标题】：How does useState() in react retrieve the correct state object and function for a functional component when using the state hook? [duplicate]使用状态挂钩时，useState() 如何为功能组件检索正确的状态对象和函数？ [复制]
【发布时间】：2019-07-18 09:44:29
【问题描述】：

我目前正在研究我对 react 中的 useState 钩子的理解。

我想知道的是；当 useState 被调用时，它如何能够正确检索状态对象和可用于修改它的函数，对于那个特定的功能组件（假设它已经在第一次被调用时创建。）

表达我的问题的另一种方式是 count 和 setCount 存在于哪里？ useState() 显然会根据调用的功能组件 useState 返回不同的状态对象和修饰函数，那么它是如何工作的呢？

我的猜测是形成了一个闭包，这意味着这个功能组件具有一个词法环境，该环境由创建闭包时范围内的任何局部变量组成，这就是 count 和 setCount 在何时可用的原因useState 被调用。但我无法确认这一点，由于涉及到 react，我可能会离开。

export const MyFunctionalComponent = () => {

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

return (
    <h1>This is my component.</h1>
);

}

谁能帮我解决这个问题？

@edit：我很确定我已经不再考虑闭包了，查看反应库源代码我找到了 useState 函数的实现。

export function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

我可能不得不深入挖掘并打开它才能得到答案。

【问题讨论】：

我不确定我是否真的得到了你的问题。是关于钩子在引擎盖下的工作原理吗？那么medium.com/@ryardley/… 应该会有所帮助
好的，我去看看谢谢！
谢谢@ShubhamKhatri，这看起来与我想知道的非常相似
很高兴它为您提供了您想知道的信息。然后将其作为副本关闭以支持另一个问题
这是同一问题的另一个（比大多数人关心的更详细）答案：stackoverflow.com/questions/53974865/…

标签： javascript reactjs react-hooks

【解决方案1】：

我在 React 文档页面上找到了以下内容，其中至少对 useState 如何能够获取功能组件的本地状态进行了基本描述。

React 跟踪当前呈现的组件。感谢 Hooks 的规则，我们知道 Hooks 只能从 React 调用组件（或自定义 Hooks——也只能从 React 调用组件）。

有一个与每个关联的“内存单元”的内部列表零件。它们只是 JavaScript 对象，我们可以在其中放置一些数据。当你调用 useState() 之类的 Hook 时，它会读取当前单元格（或在第一次渲染期间初始化它），然后将指针移动到下一个。这就是多个 useState() 调用每个 get 的方式独立的地方州。

【讨论】：