GPT
在 React 中，Hooks 是基于调用顺序的。这意味着 Hooks 的调用顺序必须保持稳定，不能在组件的渲染过程中发生变化。如果将 Hooks 放在条件语句（比如 if、for、while 等）中，就会导致 Hooks 的调用顺序在不同渲染周期之间发生变化，从而违反了 React Hooks 的规则。
具体来说，当组件重新渲染时，React 会根据 Hooks 的调用顺序来确定每个 Hook 对应的状态。如果 Hooks 放在条件语句中，那么条件满足与否可能会导致不同的 Hooks 被调用，这样就会破坏 Hook 调用顺序的稳定性，可能会导致组件状态的混乱和不一致。
举个例子，假设有以下代码：
function MyComponent(props) {
if (props.condition) {
const [count, setCount] = useState(0);
// ...
} else {
const [name, setName] = useState('');
// ...
}
// ...
}
在这个例子中，如果 props.condition 的值在组件重新渲染时发生变化，那么在不同的渲染周期中，useState 调用的顺序就会不同，导致组件的状态发生不可预测的变化。
因此，React 规定 Hooks 必须在函数组件的顶层使用，不能放在循环、条件语句或嵌套函数中。如果需要根据条件来使用不同的 Hook，可以通过条件判断来决定不同的逻辑或渲染不同的组件。
追问：从源码上怎么解释呢？
从 React Hooks 的源码实现来看，Hooks 的状态是与组件实例相关联的。每次组件重新渲染时，React 会使用相同的顺序来调用 Hooks，这样才能确保正确地管理组件的状态。
Hooks 的实现基于链表结构。当组件函数被调用时，React 会根据 Hooks 的调用顺序创建一个链表，并将这个链表与组件实例相关联。这个链表包含了所有在函数组件中调用的 Hooks。例如，对于 useState，React 会在链表中创建一个新的节点来存储状态值和更新函数。
当组件重新渲染时，React 会重新执行组件函数，并根据相同的顺序重新调用 Hooks。这样，React 就能够确保每个 Hook 的调用顺序都是稳定的。
如果将 Hooks 放在条件语句中，会导致不同条件下的 Hooks 调用顺序发生变化，从而破坏了链表结构的稳定性。例如，在一个条件满足时调用了 useState，而在另一个条件下未调用，这样就会导致链表结构在不同条件下的变化，进而违反了 Hooks 的调用顺序必须保持稳定的规则。
因此，从源码的角度来看，React Hooks 的设计要求 Hooks 的调用顺序保持稳定，以确保正确地管理组件的状态，并且不能在条件语句中使用 Hooks，以维护 Hooks 的调用顺序的稳定性。
