React 的 useState 是一个内置的 Hook，它让你在 React 函数组件中添加 state。在 React 中，Fiber 是一个用于协调和调度工作的数据结构。React Fiber 是 React 的核心算法，也被称为 Reconciliation algorithm（协调算法）。在 Fiber 架构中，每一个 React 元素都对应一个 Fiber 节点。
然而，React 源码的实现非常复杂，包含了很多边界条件的处理，错误处理，以及性能优化。下面的例子只是一个基础的概念模型，用于帮助理解 useState 和 Fiber 是如何工作的：
首先，我们需要一个全局变量来保存当前正在工作的 Fiber：
let wipFiber = null
然后，我们需要一个变量来保存当前的 hook：
let hookIndex = null
然后我们来实现 useState 函数：
function useState(initial) {
const oldHook =
wipFiber && wipFiber.alternate && wipFiber.alternate.hooks && wipFiber.alternate.hooks[hookIndex]
const hook = {
state: oldHook ? oldHook.state : initial,
queue: [],
}
const actions = oldHook ? oldHook.queue : []
actions.forEach(action => {
hook.state = action(hook.state)
})
const setState = action => {
hook.queue.push(action)
// trigger re-render
}
if (wipFiber && wipFiber.alternate) {
wipFiber.alternate.hooks.push(hook)
}
hookIndex++
return [hook.state, setState]
}
这个简单的 useState 实现通过保存每一次状态改变的 action 到一个 queue 中，然后在每次 render 的时候，遍历并执行这些 action 来更新 state。当调用 setState 时，我们将新的 action 添加到 queue，然后触发一个新的 render。
然而在实际的 React 源码中，useState 的实现会更复杂，因为它需要处理更多的边界条件，错误处理，以及性能优化。而且，在实际的 React 源码中，Fiber 的结构和工作方式也会更复杂。例如，React 使用了一个双缓冲技术，即每个 Fiber 有两个版本，一个当前在屏幕上的版本，和一个正在构建的新版本。这样可以让 React 在新的版本准备好之前，持续显示旧的版本，从而提高用户体验。
