useState hook如何知道react中的调用上下文

Posted 2023-02-23

【中文标题】useState hook如何知道react中的调用上下文

【英文标题】：How does useState hook know the calling context in react

【发布时间】：2021-05-05 11:20:58

【问题描述】：

我正在从使用类组件切换到使用 React 中的功能组件。我通读了他们的文档，我想知道useState 钩子是如何工作的。

在他们的FAQ 中，他们与我提出的问题相同，即每个组件都有一个内部列表：用于存储状态变量，并且useState 知道用于存储状态变量的调用组件。

我想知道useState 是如何知道调用组件的，因为除了初始状态值之外我们不传递任何其他内容。

有人可以举个例子来解释一下吗？我真的很想知道这是如何工作的。

【问题讨论】：

@user67 这解释了如何使用useState。我想知道它如何设法访问该内部列表

【参考方案1】：

useState 是 react 提供的状态钩子。它返回一个“对”当前状态值和一个更新它的函数，还接受一个参数，该参数是您要为状态变量分配的初始值。 在上面的示例中，count 是状态变量，setCount 是更改值的函数，0 是我们分配给 count 的默认值。在这个例子中，我们使用计数器作为整数值只是为了演示，但我们可以使用任何其他类型，如字符串、对象、数组等，也可以使用在单个组件中定义的多个状态变量。

import React,  useState  from 'react;
const MyComponent = (props) => 
const [count, setCount] = useState(0)
return (
    <div>
        <p>Count: count</p>
        <button onClick=() => setCount(count + 1)>
            Increment Count
        </button>
        <button onClick=() => setCount(count - 1)>
            Decrement Count
        </button>
    </div>
)

export const MyComponent;

【讨论】：

感谢回答但我想知道useState是如何知道对应的调用组件

【参考方案2】：

Assuming that seterInClass is an arrow function define to set the value of the variable username.   
 setterInClass = (val) =>
            this.setState(username:val);
        
        in a class the initialization is through this.state
        in a functional it is through the userState which acts as a glue.
         this.state = username:'' + setterInClass is equivalent to const [username, setUsername] = useState('').
        Meaning useState is establishing a relation of setter to the variable username, after initializing it; And avoid us to write this.state to get the value of any variable or having top write const username = this.state; 
  So it is cleaner, less code for us and make functionals component looks cute

【参考方案3】：

"useState" 返回一个包含两个项目的数组。在第一个索引中，您拥有状态本身，在第二个索引中，您将获得处理该状态的函数。 这样做你就会明白：

const useStateArray = useState();
console.log(useStateArray[0]);
console.log(useStateArray[1]);

【讨论】：

感谢您的回答但这并没有提供答案。我问useState怎么知道对应的组件。

@Clarke 那是你的答案。检查此链接：medium.com/the-guild/…