React 如何实现 hooks 使其依赖调用顺序

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,
  };
}

让钩子按照它们的方式行事的关键属性memoizedState和next。

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

更新后finishHooks() 将被调用，其中钩子队列中第一个节点的引用将存储在memoizedState属性中的渲染光纤上