为什么react hooks不能写在条件语句里React Hooks 的设计依赖于调用顺序的稳定性来正确管理组件的状态。

React Hooks 的设计依赖于调用顺序的稳定性来正确管理组件的状态。如果在条件语句（如 if、for、switch 或嵌套函数）中使用 Hooks，会导致 Hooks 的调用顺序在不同渲染之间发生变化，从而破坏 React 的状态管理机制。

Hooks 的底层实现依赖顺序
React 内部通过一个链表结构来记录组件中所有 Hooks 的状态。每个 Hook 的“记忆”（如 useState 的值）是通过它在链表中的位置（即调用顺序）来关联的。如果某个 Hook 在条件语句中被跳过，后续 Hooks 的顺序会被打乱，导致状态与预期不一致。
示例问题
假设以下代码：

 function MyComponent() {
   if (condition) {
     useState(1); // Hook 1
   }
   useState(2);    // Hook 2
   useEffect(() => {}); // Hook 3
 }

- 当 condition 为 true 时，Hooks 顺序是 [Hook1, Hook2, Hook3]。
- 当 condition 变为 false 时，Hooks 顺序变为 [Hook2, Hook3]。
- React 会认为 Hook2 对应原来的 Hook1，Hook3 对应原来的 Hook2，导致状态错乱。
React 的报错机制
开发模式下，React 会检测 Hooks 的调用顺序是否稳定，如果不稳定则会抛出错误（如 React has detected a change in the order of Hooks）。
如何正确使用条件逻辑？
1. 将条件放在 Hook 内部
  如果需要根据条件控制 Hook 的行为，应该将条件判断移到 Hook 内部，而不是在外部包裹 Hook：
```
// ✅ 正确：条件在 Hook 内部
useEffect(() => {
  if (condition) {
    // 执行副作用
  }
}, [condition]);
```
2. 动态 Hook 的替代方案
  如果需要动态加载某些逻辑，可以使用组件拆分或 useMemo/useEffect 管理条件逻辑：
```
function MyComponent({ condition }) {
  const data = useMemo(() => {
    return condition ? calculateExpensiveValue() : defaultValue;
  }, [condition]);

  // 或者拆分组件
  return condition ? <ComponentWithHook /> : <FallbackComponent />;
}
```
总结：

React Hooks 必须在组件顶层无条件调用，以确保每次渲染时 Hook 的顺序完全一致。条件或循环逻辑应通过其他方式（如组件拆分、useEffect 依赖项或状态派生）实现。

为什么react hooks不能写在条件语句里