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

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


一、错误示例

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

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

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

💥 运行后会报错:

sql 复制代码
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 通过索引 找到 useStateuseEffect 等 Hook 的状态。
    • 如果 Hook 位置发生变化,React 就无法正确匹配 Hook 对应的状态,导致 bug。
  2. 如果 Hook 只在某些条件下执行,调用顺序就会变

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

举个例子

假设有这样一段代码:

scss 复制代码
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 误认为 nameage,状态错乱!

三、正确的写法

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

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

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

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

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

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

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

方案 3:用 useMemouseEffect

如果 Hook 逻辑必须放在 if 里面,可以用 useEffectuseMemo

scss 复制代码
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 规则! 🚀

相关推荐
AI视觉网奇1 小时前
rknn yolo11 推理
前端·人工智能·python
gplitems1231 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡4 小时前
React Native 中的 useCallback
javascript·react native·react.js
wyzqhhhh4 小时前
less和sass
前端·less·sass
Nan_Shu_6145 小时前
学习:uniapp全栈微信小程序vue3后台-额外/精彩报错篇
前端·学习·微信小程序·小程序·uni-app·notepad++
excel6 小时前
Vue3 中的双向链表依赖管理详解与示例
前端
谢尔登7 小时前
【Nest】基本概念
javascript·node.js·express
前端小白从0开始7 小时前
Chrome DevTools高级用法:性能面板内存泄漏排查
前端·chrome·chrome devtools
EveryPossible7 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫7 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js