你以为 Hook 想用就用？这些坑不注意分分钟崩溃！⚠️ 你以为 Hook 想用就用？这些坑不注意分分钟崩溃！ 🧨 一

⚠️ 你以为 Hook 想用就用？这些坑不注意分分钟崩溃！

React 初学者千万注意：Hook 不是想用就能用，用错位置、引错包、乱用条件语句，一个 Invalid hook call 就让你 Debug 半天！

🧨 一、先来看看这个经典报错

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

这句红彤彤的报错信息，几乎是每一个刚接触 React Hook 的人都会遇到的第一次“暴击”。

它的意思是：你在不该用 Hook 的地方用了 Hook！

🔍 二、Hook 究竟有什么“使用规则”？

React Hooks 是个“纪律严明”的东西，一旦违反它的几条基本规则，就会立刻报错。

以下是你必须牢记的 Hook 使用四大“铁律”：

✅ 1. 只能在函数组件或自定义 Hook 中使用

Hooks 只能在函数组件的顶层调用，不能在普通函数、类组件或 JS 逻辑语句中调用。

❌ 错误示例：

function normalFunction() {
  const [count, setCount] = useState(0); // ❌ 错误！不是函数组件！
}

✅ 正确示例：

function MyComponent() {
  const [count, setCount] = useState(0); // ✅ 正确！
  return <div>{count}</div>;
}

✅ 2. 不要在条件语句、循环或嵌套函数中调用 Hook

Hooks 必须在组件函数的最外层调用。原因是 React 需要保持 Hook 的调用顺序一致。

❌ 错误示例：

function MyComponent() {
  if (someCondition) {
    useEffect(() => {
      console.log('会触发错误！');
    }, []);
  }
}

✅ 正确示例：

function MyComponent() {
  useEffect(() => {
    if (someCondition) {
      console.log('这样才是对的');
    }
  }, []);
}

✅ 3. React 必须是“唯一版本”

你的项目中如果有 多个 React 版本同时存在，Hook 系统会直接“崩溃”。

🛠 解决方式：

使用 npm ls react 或 yarn list react 检查是否安装了多个版本。
确保 React 和 React DOM 的版本一致。
使用 Webpack 的 alias 统一 React 引用：

resolve: {
  alias: {
    react: path.resolve('./node_modules/react'),
  },
}

✅ 4. 自定义 Hook 必须以 `use` 开头

这是一个社区约定，也是 React 能正确识别 Hook 的依据。

❌ 错误示例：

function fetchData() {
  const [data, setData] = useState(null); // ❌ React 不认为它是 Hook！
}

✅ 正确示例：

function useFetchData() {
  const [data, setData] = useState(null); // ✅ 正确命名
  return data;
}

🧠 三、牢记这些 Hook 的“地雷区”

错误场景	说明
在 class 组件中使用 Hook	Hook 只支持函数组件
在事件处理函数中调用 Hook	不行，事件不是组件主体的一部分
多版本 React 引起冲突	常见于 mono repo 或嵌套依赖
动态导入 React	破坏 Hook 运行时环境
使用不稳定的构建工具（如 Vite + 多 React 包）	需特别小心依赖路径

🛠 四、如果你遇到了 Invalid Hook Call 怎么办？

先排查以下 checklist：

✅ Hook 是否只在函数组件或自定义 Hook 中调用？
✅ 是否写在了条件语句或循环里？
✅ 是否有多个 React 实例？
✅ 是否正确引入了 react 和 react-dom？
✅ 是否用了多个包管理工具（如同时用了 npm 和 yarn）？

🎯 五、总结一下：初学者必须牢记的口诀！

Hook 用得稳，四条规则记心中；
组件顶层来调用，条件嵌套全都空；
React 单一版本好，文件引用别乱冲；
自定义 Hook 要“use”，规范命名别糊涂！

🔚 写在最后

React Hook 是让函数组件焕发生机的利器，但也像“高压线”一样，不能随便乱碰。只要你遵守规则，它会让你的代码更加优雅、灵活；反之，只会让你 Debug 到秃头。

你以为 Hook 想用就用？这些坑不注意分分钟崩溃！