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

Question

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

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

我想知道执行上面两行后的本地状态对象树是什么样子？ 胡克规则说了一些关于状态如何处理的事情

React依赖于Hook的调用顺序

还是局部状态根本不是对象树，而只是一个数组？

提前致谢！

Answer 1

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

从文档中：

每个组件都有一个内部的“内存单元”列表。它们只是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,
  };
}

使钩子表现为memoizedStateand 的关键属性next。

在调用每个函数之前，prepareHooks()将调用Component调用，其中，当前光纤及其在hooks队列中的第一个钩子节点将存储在全局变量中。这样，每当我们调用一个钩子函数时(useXXX())，它将知道在哪个上下文中运行。

在update finishHooks(）之后，将调用该钩子队列中第一个节点的引用，该引用将存储在该memoizedState属性中的渲染光纤上