Reactjs 如何实现挂钩，使其依赖于调用顺序

例如，状态可以将本地状态附加到无状态功能组件

const [name, setName] = useState('tom')
const [age, setAge] = useState(25)

我想知道在执行上面的两行之后，本地状态对象树是什么样子的？ 说明了如何处理状态

React依赖于调用挂钩的顺序

或者本地状态根本不是对象树，只是一个数组

---

提前谢谢

钩子在内部实现为一个队列，每个钩子由一个节点表示，该节点引用下一个钩子

从文件中：

有一个与每个内存单元相关联的“内存单元”的内部列表 组成部分。它们只是JavaScript对象，我们可以在其中放置一些数据。 当调用像useState（）这样的钩子时，它读取当前单元格（或 在第一次渲染期间对其进行初始化），然后将指针移动到 下一个。这就是多个useState（）调用每个get的方式 独立的地方州

该架构类似于

{
  memoizedState: 'A',
  next: {
    memoizedState: 'B',
    next: {
      memoizedState: 'C',
      next: null
    }
  }
}

单个钩子的模式如下所示。可以在

让钩子按原样运行的关键属性是

memoizedState

和

next

在每次调用函数组件之前，将调用

prepareHooks（）

，其中当前光纤及其挂钩队列中的第一个挂钩节点将存储在全局变量中。这样，无论何时调用钩子函数

（useXXX（））

，它都会知道在哪个上下文中运行

---

更新后，将调用finishHooks（），其中hooks队列中第一个节点的引用将存储在渲染光纤上的

MemorizedState

属性中

hooks不允许传递名称参数来解决此问题是否有原因？e、 g.

使用state（“tom”，“state_1”）

并在缺少第二个参数时返回顺序？甚至可能存在这样的约束，即在第一次渲染时应调用所有挂钩，或者对于后期调用有合理的行为？或者它是为了强制在每次渲染时调用所有挂钩？（从某种意义上说，钩子名称可以解决排序问题，但有必要在每次渲染时调用所有钩子）

function createHook(): Hook {
  return {
    memoizedState: null,

    baseState: null,
    queue: null,
    baseUpdate: null,

    next: null,
  };
}