React Hooks 中的 useState() 如何知道它是哪个组件实例?

Question

React Docs 说：

React 如何将 Hook 调用与组件相关联？

反应保持跟踪 当前呈现组件。多亏了钩子规则，我们 知道钩子只从 React 组件(或自定义钩子(调用 — 也只从 React 组件调用(。有一个 与每个组件关联的"存储单元"的内部列表。 它们只是JavaScript对象，我们可以在其中放置一些数据。当你 调用一个像 useState(( 这样的钩子，它读取当前单元格(或初始化 它在第一次渲染期间(，然后将指针移动到下一个 一。这就是多个 useState(( 调用每个调用获得独立本地的方式 州。

首先。。。这个"记忆细胞"是什么？我们可以自己打印出来看看它的价值吗？

其次，函数只有一个实例(如以下示例中的Counter()(。因此，如果我们在 DOM 中渲染两次<Counter />，一次渲染到<div id="root1">，第二次渲染到<div id="root2">，函数Counter()如何知道哪个是哪个？

function Counter() {
let [count, setCount] = React.useState(0);
return (
<div>
<button onClick={() => setCount(count + 1)}> + </button>                    
{ count }
<button onClick={() => setCount(count - 1)}> - </button> 
</div>
)
}

Answer 1

假设您在父容器 JSX 中有两个计数器：

<div>
<Counter/>
<Counter/>
</div>

这就是 React 如何"知道哪个是哪个"(极其简化(：

const componentStates = [ { value: 13 }, { value: 27 } ]; //"memory cells"
let context;
// the parent container JSX will be transformed/executed in this way:
function render() {
context = componentStates[0];
Counter();
context = componentStates[1];
Counter();
}
function useState() {
return [ context.value, updateFunction ];
}
function updateFunction(newValue) {
context.value = newValue;
render();
}

理解这一点的一个关键概念是，React.useState不是一个纯函数，它依赖于渲染上下文。