为什么React Hooks必须用在函数组件内部？

Question

我正在研究 React，并有一个关于 “为什么 React Hooks 必须在函数组件内部使用”的问题

我错误地将

useContext

写在函数组件之外，并收到错误消息。

React Hook "useContext" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.

我想也许是为了管理调用钩子的顺序，我阅读了 React 文档来找出确切的原因。

但只有我能找到的是“在函数组件主体的顶层调用它们”行。

我知道这是一个非常愚蠢的问题，但我找不到很好的理由让我理解。

我非常感谢您的帮助。

Answer 1

你是对的，React 在底层将钩子存储在数组中，仍然有有效的解释这里：

React 会跟踪当前渲染的组件。感谢 Hook 规则，我们知道 Hook 只能从 React 组件中调用（或自定义 Hook——也只能从 React 组件中调用）。
有一个与每个组件相关的“存储单元”的内部列表。它们只是 JavaScript 对象，我们可以在其中放置一些数据。当您调用像 useState() 这样的 Hook 时，它会读取当前单元格（或在第一次渲染期间初始化它），然后将指针移动到下一个单元格。这就是多个 useState() 调用每个获得独立本地状态的方式。