在 React 中，为什么不能在条件语句中调用 useState 或 useEffect？

在 React 中，为什么不能在条件语句中调用 useState 或 useEffect？

解析：
这是因为 React 依赖于 Hooks 的调用顺序在每次渲染时保持一致，以正确地将状态和副作用与组件实例关联起来。如果在条件语句（如 if）中调用 useState 或 useEffect，可能导致某次渲染时 Hook 被跳过，从而破坏调用顺序。这违反了 React Hooks 的“规则之一”：只在顶层调用 Hooks。

例如，以下代码是错误的：

function MyComponent({ flag }) {
  if (flag) {
    const [count, setCount] = useState(0); // ❌ 条件调用，违反规则
  }
  useEffect(() => {
    // ...
  });
  return <div>...</div>;
}

正确做法是始终在组件的顶层调用所有 Hooks，即使某些状态或副作用仅在特定条件下使用：

function MyComponent({ flag }) {
  const [count, setCount] = useState(0); // ✅ 始终调用
  useEffect(() => {
    if (flag) {
      // 在 useEffect 内部进行条件逻辑
    }
  }, [flag]);
  return <div>...</div>;
}

React 通过内部的链表结构按顺序追踪每个 Hook 的状态，顺序改变会导致状态错乱或 bug。因此，必须确保 Hooks 的调用顺序在每次渲染中保持一致。