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"iscalled conditionally.React Hooks must be calledinthe exact sameorderinevery 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 的索引可能出错 }假设组件执行步骤如下：
| 第一次渲染 (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语句外部
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 位置 | 能不能用？ | 原因 |
|---|---|---|
| 普通函数内部 | ❌ 不行 | Hook 必须在 React 组件或自定义 Hook 内部 |
| if/else 语句中 | ❌ 不行 | Hook 不能在条件判断中调用，会破坏顺序 |
| for/while 循环中 | ❌ 不行 | 不能动态改变 Hook 位置 |
| 普通 JSX 代码中 | ❌ 不行 | Hook 不能在 JSX 里使用 |
| 顶层作用域 | ✅ 可以 | 确保 Hook 按顺序执行 |
| useEffect/useMemo 内部 | ✅ 可以 | 逻辑可变但 Hook 位置固定 |
牢记： Hook 只能在组件的顶层作用域中使用，不能写在if/else语句里，否则会破坏 React 的 Hook 规则！
