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

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

---

一、错误示例

jsx
复制编辑
function MyComponent() {
  const isDarkMode = true;

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

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

💥 运行后会报错：

sql
复制编辑
React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render.

---

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

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

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

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

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

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

举个例子

假设有这样一段代码：

jsx
复制编辑
function MyComponent() {
  const [count, setCount] = useState(0);

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

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

假设组件执行步骤如下：

第一次渲染 (count = 2)	第二次渲染 (count = 6)
useState(0) → count	useState(0) → count
useState(20) → age	useState("React") → name
-	useState(20) → age

😱 问题出现了！

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

---

三、正确的写法

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

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

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

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

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

jsx
复制编辑
function MyComponent() {
  const [theme, setTheme] = useState("light");

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

方案 3：用 useMemo 或 useEffect

如果 Hook 逻辑必须放在 if 里面，可以用 useEffect 或 useMemo：

jsx
复制编辑
function MyComponent({ isDarkMode }) {
  const [theme, setTheme] = useState("light");

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

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

---

四、总结

Hook 位置	能不能用？	原因
普通函数内部	❌ 不行	Hook 必须在 React 组件或自定义 Hook 内部
if/else 语句中	❌ 不行	Hook 不能在条件判断中调用，会破坏顺序
for/while 循环中	❌ 不行	不能动态改变 Hook 位置
普通 JSX 代码中	❌ 不行	Hook 不能在 JSX 里使用
顶层作用域	✅ 可以	确保 Hook 按顺序执行
useEffect/useMemo 内部	✅ 可以	逻辑可变但 Hook 位置固定

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