React Hooks 是 React 16.8 版本中引入的新特性，它允许你在不编写类的情况下使用 state 以及其他 React 特性。useState 是一个基础 Hook，用于在函数组件中声明状态变量。
在使用 useState 时，你可能会好奇：既然函数组件没有实例（不像类组件那样），那么 useState 是如何知道它是在哪个组件的上下文中被调用的？
React 内部使用了一个细致的机制来追踪 Hooks 的调用顺序和组件的状态。以下是 useState 背后的一些关键点：
-
组件调用栈：每当一个组件被渲染时，React 会维护一个 "当前正在渲染的组件" 的引用。这意味着当你在组件内部调用
useState时，React 知道这个useState属于哪个组件。 -
Hook 调用顺序：在 React 函数组件中，Hooks 必须按照同一顺序被调用。这是因为 React 依赖这个调用顺序来正确地映射 state 到内部数组里的正确位置。React 假设每次组件渲染时，Hooks 的调用顺序是不变的。
-
内部状态数组：React 在组件的内部维护着一个状态数组。每个
useState调用都会对应数组中的一个位置。组件的第一个useState调用对应数组的第一个位置，第二个对应第二个位置，以此类推。这样，即使是在函数调用完成后，React 也能通过这个稳定的位置来存取对应的状态。 -
闭包：每次组件渲染时，
useState都会返回新的 setter 函数，这些 setter 函数通过闭包能记住它们自己的 state。这意味着即使 state 在组件的多次渲染之间改变，每个 setter 函数仍然能够更新正确的 state。 -
Fiber 节点：React 使用了一种名为 "Fiber" 的内部实现来追踪组件树。每个组件都有一个与之对应的 Fiber 节点，可以想象成是组件实例的一种轻量级表示。这个节点包含了组件的状态信息，包括它的 Hooks。
综上所述，尽管函数组件没有实例的概念，但是 React 内部使用一系列的机制确保了 useState 可以准确无误地将状态关联到正确的组件和正确的渲染周期。这些机制要求开发者在使用 Hooks 时遵循一定的规则（例如，不在循环、条件或嵌套函数中调用 Hooks），以确保这些机制能够正常工作。