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

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 的索引可能出错 }

假设组件执行步骤如下：

😱 问题出现了！

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 规则！