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

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

解析：
React 要求所有的 Hook（如 useState、useEffect、useContext 等）必须在组件的顶层调用，不能在条件语句、循环或嵌套函数中调用。这是因为 React 依赖于 Hook 调用的顺序来在每次渲染之间保持状态的一致性。

React 内部使用一个“Hook 链表”来跟踪每个 Hook 的状态。每次组件重新渲染时，React 会按照与上次完全相同的顺序调用这些 Hook。如果在条件中调用 Hook（例如只在某个 if 语句为真时才调用 useState），那么 Hook 的调用顺序可能会在渲染之间发生变化，导致 React 无法正确匹配 Hook 与其对应的状态，从而引发难以调试的 bug（例如状态错乱、值丢失等）。

正确做法是始终在组件顶层无条件地调用所有 Hook。如果需要条件逻辑，应该将条件放在 Hook 内部（例如在 useEffect 中判断），或者通过其他方式（如状态变量）控制行为，而不是控制 Hook 本身的调用。

示例（错误）：

if (shouldShow) {
  const [count, setCount] = useState(0); // ❌ 错误：条件调用 Hook
}

示例（正确）：

const [count, setCount] = useState(0); // ✅ 正确：顶层调用

useEffect(() => {
  if (shouldShow) {
    // 在 Hook 内部使用条件逻辑
  }
}, [shouldShow]);