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

Question

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

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

我想知道执行上面两行后本地状态对象树是什么样子的？ Rules of Hooks 说明了状态的处理方式

React relies on the order in which Hooks are called

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

提前致谢！

Answer 1

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

来自文档：

There is an internal list of “memory cells” associated with each component. They’re just JavaScript objects where we can put some data. When you call a Hook like useState(), it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple useState() calls each get independent local state.

架构类似于

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

单个钩子的架构如下。它可以在 implementation

中找到

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

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

    next: null,
  };
}

让挂钩按照它们的方式运行的关键属性是 memoizedState 和 next。

在Component的每个函数调用之前，prepareHooks()都会被调用，当前fiber和它在hooks队列中的第一个hook节点会被保存在全局变量中。这样，任何时候我们调用一个钩子函数 (useXXX()) 它都会知道在哪个上下文中运行.

更新后 finishHooks() 将被调用，hooks 队列中第一个节点的引用将存储在 memoizedState 属性[= 中渲染的纤程中20=]

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

How does React implement hooks so that they rely on call order

reactjs

react-hooks