反应钩——引擎盖下面发生了什么？

Question

我一直在尝试React钩子，它们似乎可以简化存储状态之类的事情。然而，他们似乎用魔法做了很多事情，我找不到一篇关于他们如何实际工作的好文章。

第一件看起来很神奇的事情是，调用像useState（）这样的函数是如何在每次调用setXXX方法时导致函数组件的重新渲染的？

当功能组件甚至不具备在挂载/卸载上运行代码的能力时，像use效应（）这样的东西是如何伪造组件的？

useContext（）实际上是如何访问上下文的，它是如何知道哪个组件在调用它的？

这甚至还没有开始覆盖所有第三方钩子，这些钩子已经像useDataLoader一样涌现出来，它允许您使用以下内容。。。

const { data, error, loading, retry } = useDataLoader(getData, id)

当数据、错误、加载和重试发生更改时，如何重新呈现组件？

对不起，有很多问题，但我想大部分问题都可以归结为一个问题，那就是：

钩子后面的函数实际上是如何访问调用它的函数/无状态组件的，以便它能够在重新呈现和使用新数据启动重新呈现之间记住事情的？

Answer 1

我建议你读书https://eliav2.github.io/how-react-hooks-work/

它包括关于使用react钩子时发生了什么的详细解释，并用许多交互式示例进行演示。

注意-本文没有用技术术语解释React如何安排后续阶段的调用，而是演示React用于安排后续阶段调用的规则。

Answer 2

丹·阿布拉莫夫几天前刚刚写了一篇博文，内容包括：

https://overreacted.io/how-does-setstate-know-what-to-do/

第二部分详细介绍了useState之类的钩子。

对于那些有兴趣深入了解一些实现细节的人，我这里有一个相关的答案：react钩子如何确定它们所针对的组件？

Answer 3

React hook利用组件的隐藏状态，它存储在光纤中，光纤是对应于组件实例的实体（在更广泛的意义上，因为功能组件不会将实例创建为类组件）。

React渲染器为钩子提供对各自上下文、状态等的访问。顺便说一句，React渲染器调用组件函数。所以它可以将组件实例与在组件函数内部调用的钩子函数相关联。

此代码段解释了它的工作原理：

let currentlyRenderedCompInstance;
const compStates = new Map(); // maps component instances to their states
const compInstances = new Map(); // maps component functions to instances

function useState(initialState) {
  if (!compStates.has(currentlyRenderedCompInstance))
    compStates.set(currentlyRenderedCompInstance, initialState);

  return [
    compStates.get(currentlyRenderedCompInstance) // state
    val => compStates.set(currentlyRenderedCompInstance, val) // state setter
  ];
}

function render(comp, props) {
  const compInstanceToken = Symbol('Renderer token for ' + comp.name);

  if (!compInstances.has(comp))
    compInstances.set(comp, new Set());

  compInstances.get(comp).add(compInstanceToken);

  currentlyRenderedCompInstance = compInstanceToken;

  return { 
    instance: compInstanceToken,
    children: comp(props)
  };
}

类似于如何useState可以访问当前呈现的组件实例令牌通过当前的RenderedCompInstance，其他内置钩子也可以做到这一点，并维护该组件实例的状态。