我一直在尝试 React Hooks，它们似乎确实简化了诸如存储状态之类的事情。然而，它们似乎能用魔法做很多事情，我找不到一篇关于它们实际工作原理的好文章。
第一件看起来很神奇的事情是，每次调用函数组件返回的 setXXX 方法时，调用像 useState() 这样的函数是如何导致重新渲染功能组件的？
当功能组件甚至没有在挂载/卸载上运行代码的能力时，像 useEffect() 这样的东西如何伪造 componentDidMount ？
useContext() 如何实际访问上下文，它如何知道哪个组件正在调用它？
而且这甚至没有开始涵盖已经出现的所有 3rd 方挂钩，例如 useDataLoader，它允许您使用以下...
const { data, error, loading, retry } = useDataLoader(getData, id)
数据、错误、加载和重试如何在更改时重新渲染您的组件？
抱歉，问题很多，但我想大多数问题都可以概括为一个问题，即：
钩子背后的函数如何实际访问调用它的功能/无状态组件，以便它可以记住重新渲染之间的事情并使用新数据启动重新渲染？
React hook 利用了组件的隐藏状态，它存储在一个Fiber 中，一个 Fiber 是对应于组件实例的实体（在更广泛的意义上，因为功能组件不会将实例创建为类组件）。
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通过 访问当前呈现的组件实例令牌类似currentlyRenderedCompInstance，其他内置挂钩也可以执行此操作并维护此组件实例的状态。
几天前，丹·阿布拉莫夫 (Dan Abramov) 创建了一篇博客文章，内容涵盖了以下内容：
https://overreacted.io/how-does-setstate-know-what-to-do/
后半部分专门介绍了有关像 useState 这样的钩子的细节。
对于那些有兴趣深入了解一些实现细节的人，我在这里有一个相关的答案：react hooks 如何确定它们用于的组件？
我建议阅读https://eliav2.github.io/how-react-hooks-work/
它包括有关使用 react hooks 时发生的事情的详细解释，并通过许多交互式示例进行演示。
注意 - 这篇文章没有用技术术语解释 React 调度如何调用后期阶段，而是演示了 React 用于调度后期阶段调用的规则是什么。