React如何实现钩子，使其依赖于调用顺序

React如何实现钩子，使其依赖于调用顺序

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

从文档中：

每个组件都有一个内部的“内存单元”列表。它们只是Javascript对象，我们可以在其中放置一些数据。当您调用类似于useState（）的Hook时，它将读取当前单元格（或在第一个渲染期间将其初始化），然后将指针移至下一个单元格。这就是多个useState（）调用的方式如何各自获得独立的本地状态。

该架构将类似于

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

单个钩子的架构如下。可以在实现中找到

function createHook(): Hook {  return {    memoizedState: null,    baseState: null,    queue: null,    baseUpdate: null,    next: null,  };}

使钩子表现为

memoizedState

and 的关键属性

next

。

在调用每个函数之前，

prepareHooks()

将调用Component调用，其中，当前光纤及其在hooks队列中的第一个钩子节点将存储在全局变量中。这样，每当我们调用一个钩子函数时

(useXXX())

，它将知道在哪个上下文中运行。

在update

finishHooks(

）之后，将调用该钩子队列中第一个节点的引用，该引用将存储在该

memoizedState

属性中的渲染光纤上