Question

我目前正在努力理解React的useState挂钩。

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

表达我的问题的另一种方式是count和setCount在哪里存在？ useState（）显然将返回不同的状态对象和修饰符函数，具体取决于调用了哪个功能组件useState，那么它如何工作？

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

export const MyFunctionalComponent = () => {

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

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

}

有人可以帮我清除这个问题吗？

@edit：我很确定我对闭包的思考已经走了，看看我找到了useState函数实现的React库源代码。

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

我可能必须深入研究并解压才能得到答案。

Answer 1

我在React文档页面上找到了以下内容，该页面至少提供了有关useState如何获取功能组件的本地状态的基本描述。

React跟踪当前渲染的组件。感谢钩子规则，我们知道钩子只能从React调用   组件（或自定义的Hooks-也只能从React调用   组件）。

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

当使用状态挂钩时，react中的useState（）如何为功能组件检索正确的状态对象和功能？

1 个答案: