React内部状态管理机制及useState钩子的运行原理是什么？

底层状态存储基础 #

React 为每个函数组件都维护了对应的 Fiber 节点 作为组件元数据的存储载体，所有 Hook 的状态都保存在 Fiber 节点的 memoizedState 字段上，该字段是一个按 Hook 调用顺序串联的单向链表，每个 Hook 对应链表中的一个节点，单个 Hook 节点通常存储以下信息：

• memoizedState：当前 Hook 的最新状态值
• queue：该 Hook 的更新队列，存储还未处理的状态更新请求
• next：指向链表中下一个 Hook 节点的指针

这也是 React 要求不能在循环、条件判断、嵌套函数中调用 Hook 的核心原因：一旦 Hook 调用顺序发生变化，重渲染时就会从链表中读取到错误的状态节点。

useState 完整执行逻辑 #

针对示例代码 const [testState, setTestState] = useState('test');，内部执行分为两个阶段：

1. 组件首次渲染 #

• 执行到 useState 调用时，React 会在当前组件 Fiber 节点的 memoizedState 链表末尾新增一个 Hook 节点
• 将你传入的初始值 'test' 赋值给该 Hook 节点的 memoizedState 字段
• 生成绑定了当前 Fiber 节点、对应 Hook 节点索引的修改函数 setTestState
• 最终返回数组 [testState, setTestState] 供组件使用

2. 调用修改函数触发更新 #

• 当你调用 setTestState(newValue) 时，React 会先将 newValue 推入对应 Hook 节点的更新队列
• 标记当前 Fiber 节点为待更新状态，进入 React 调度流程
• 调度完成后组件重新执行渲染，React 按照首次渲染时的 Hook 调用顺序，依次从 memoizedState 链表中取出对应的 Hook 节点，计算更新队列中的最新状态值覆盖到 Hook 节点的 memoizedState 字段，再次返回最新的状态值和修改函数，此时组件拿到的 testState 就是更新后的值。

响应式实现的核心逻辑 #

React 的响应式和数据劫持类框架逻辑不同，核心依赖渲染触发机制实现：

• 每个状态修改函数都和所属组件的 Fiber 节点、对应 Hook 节点强绑定，调用修改函数时 React 可以精准定位到需要更新的状态和所属组件，不会影响其他组件
• 状态修改后不会立刻更新 DOM，默认进入批量更新调度流程，待调度完成后统一重渲染需要更新的组件
• 重渲染时组件函数重新执行，所有用到状态的逻辑都会读取到 Hook 节点返回的最新值，最终渲染出匹配最新状态的 UI，完成响应式更新。

内容的提问来源于stack exchange，提问作者zero86