React 官方严令禁止：Hook 不能写在 if/else，真相竟然是…

在 React 中，Hook 不能放在 if/else、循环或者 switch 语句中，否则会导致 React 的 Hook 规则被破坏，最终引发错误。

一、错误示例

function MyComponent() {
  const isDarkMode = true;

  if (isDarkMode) {
    const [theme, setTheme] = useState("dark"); // ❌ Hook 放在 if 语句中
  }

  return <div>当前主题模式</div>;
}

💥 运行后会报错：

React Hook "use" is called conditionally. React Hooks must be called in the exact same order in every component render.

二、为什么 Hook 不能写在 if/else 里？

React 依赖 Hook 的调用顺序 来管理状态，不能在渲染过程中动态改变 Hook 的执行顺序。

React 通过 Hook 的调用顺序来匹配状态

• 每次组件渲染时，React 通过索引找到 useState、useEffect 等 Hook 的状态。
• 如果 Hook 位置发生变化，React 就无法正确匹配 Hook 对应的状态，导致 bug。

如果 Hook 只在某些条件下执行，调用顺序就会变

• 假设 useState 在if 语句内，只会在某些情况下执行，React 就无法在下一次渲染时找到正确的状态索引。

举个例子

function MyComponent() {
  const [count, setCount] = useState(0);

  if (count > 5) {
    const [name, setName] = useState("React"); // ❌ 这个 Hook 只在 count > 5 时执行
  }

  const [age, setAge] = useState(20); // 🚨 这个 Hook 的索引可能出错
}

假设组件执行步骤如下：

😱 问题出现了！

useState(20) 之前是第二个 Hook，现在变成了第三个。
这导致 React 误认为 name 是 age，状态错乱！

三、正确的写法

方案 1：把 Hook 提到 if 语句外部

function MyComponent() {
  const [theme, setTheme] = useState("light"); // ✅ 提前声明 Hook
  const isDarkMode = true;

  if (isDarkMode) {
    setTheme("dark"); // ✅ 这里可以放逻辑
  }

  return <div>当前主题: {theme}</div>;
}

方案 2：用三元运算符代替 if/else

function MyComponent() {
  const [theme, setTheme] = useState("light");

  const bgColor = theme === "dark" ? "#333" : "#fff"; // ✅ 三元运算符
  return <div style={{ backgroundColor: bgColor }}>当前主题</div>;
}

方案 3：用 useMemo 或 useEffect

function MyComponent({ isDarkMode }) {
  const [theme, setTheme] = useState("light");

  useEffect(() => {
    if (isDarkMode) {
      setTheme("dark");
    } else {
      setTheme("light");
    }
  }, [isDarkMode]); // ✅ 这样就不会破坏 Hook 顺序

  return <div>当前主题: {theme}</div>;
}

四、总结

牢记： Hook 只能在组件的顶层作用域中使用，不能写在if/else 语句里，否则会破坏 React 的 Hook 规则！