为什么React Hooks必须写在顶层？
首先
我相信写React的人都至少遇到过以下错误一次。
错误消息内容
在使用 React Hook“useEffect”时，它被有条件地调用。React Hooks 必须在每个组件渲染中以确切的相同顺序被调用。
在React的Hooks规则中，有一个规定是“只能在顶层调用Hook”。
在这个例子中，由于在if语句中定义了useEffect，违反了这个规定，所以会触发错误。
我明白了? 出现错误是因为违反了规则。
但是，为什么会定义这样的规则呢？一定有一些机制上的理由才会定义规则并进行错误检测。只是，为什么我完全不明白呢。。。
所以，这次我打算揭示一下为什么需要将 “React Hooks” 写在顶层的原因！
请确认Hooks的规则。
Hooks的规则有明确的官方记录，如下所示。
钩子规则
只有在顶层代码中才能调用钩子函数。请不要在循环、条件分支或嵌套的函数内部调用钩子函数。相反，请在您的 React 函数的顶层代码中，在任何早期返回语句之前调用它们。这样做可以确保每次组件渲染时，钩子函数都按照相同的顺序调用。这是为了确保 React 在多次调用 useState 或 useEffect 时正确地保持钩子状态的机制（如果您感兴趣，可以在页面底部详细了解）。
为了确保组件在渲染时的顺序，需要将其置于顶层。
嗯，我不明白???很多事情都不明白，但有三个主要的点我不明白。
-
- 将其置于顶级位置时，为何能保证顺序？
-
- 首先，什么是顺序？
- 顺序这个词意味着有多个元素，但元素又是什么？
由于不懂的东西就是不懂，我打算一步一步地进行理解。
由于与本文没有直接关联，因此我会在下面进行补充说明。
请不要从普通的JavaScript函数中调用Hooks。而是按照以下方式调用：
✅ 从React函数组件内部调用。
✅ 从自定义的Hooks内部调用（在下一页中进行解释）。
遵守此规则可以确保从源代码中无误地访问组件内的所有状态逻辑。
公式的解释
不如繁文缛节地叙述，我们不如直接引用公式的解释。
啊，原来如此?我完全理解了……但并不代表我完全理解?。
我理解有顺序，但为什么非要按照顺序理解呢？
我问了ChatGPT一个问题，他给了一个理性的回答，我将其记录下来。
请用汉语将ChatGPT的回答简化为一种表达方式：
假设我们以现实世界的烹饪为例来解释，useState可以视为食材，useEffect可以视为烹饪过程，而useContext可以视为调味。
在这种情况下，必须严格按照材料→烹饪→调味的顺序进行处理。
没有材料就无法进行烹饪和调味，没有完成烹饪就无法进行调味。
这是非常基本的事情。
据说ReactHooks将这种常见的思维方式带入了React的世界，在ReactHooks中提出了将其写在顶层的规则。
因此，它不能在条件分支、循环或嵌套函数内调用。
总结
因为React Hooks需要保证顺序，所以必须在顶层编写。
文献引用
