Hooks正确用法及常见错误

React Hooks 的这条规则（只在函数组件顶层调用，不可在条件、循环或嵌套函数中使用）是为了保证 Hooks 的调用顺序在每次渲染时完全一致。React 内部依赖 Hooks 的调用顺序来正确关联状态和副作用，如果顺序被打乱，会导致状态混乱或不可预测的 bug。

---

错误示例与正确示例对比

1. 错误：在条件语句中调用 Hooks

function BadComponent({ isLoggedIn }) {
  if (isLoggedIn) {
    const [count, setCount] = useState(0); // ❌ 条件中调用 Hook
  }
  return <div>...</div>;
}

问题：当 isLoggedIn 的值变化时，Hooks 的调用顺序可能不一致。比如：

• 第一次渲染时 isLoggedIn=true，调用 useState。
• 第二次渲染时 isLoggedIn=false，跳过 useState。
  此时 React 无法正确关联两次渲染的 Hooks，导致状态错乱。

---

2. 错误：在循环中调用 Hooks

function BadList() {
  const items = [1, 2, 3];
  for (let i = 0; i < items.length; i++) {
    const [count, setCount] = useState(0); // ❌ 循环中调用 Hook
  }
  return <div>...</div>;
}

问题：循环次数可能变化（比如动态渲染列表），导致 Hooks 数量不一致。React 依赖 Hooks 的固定顺序，无法处理动态数量的 Hooks。

---

3. 错误：在嵌套函数中调用 Hooks

function BadComponent() {
  const handleClick = () => {
    const [count, setCount] = useState(0); // ❌ 嵌套函数中调用 Hook
  };
  return <button onClick={handleClick}>Click</button>;
}

问题：Hooks 必须在函数组件的顶层作用域调用，嵌套函数中的 Hook 可能不会在每次渲染时被调用，导致状态丢失。

---

正确用法

1. 始终在顶层调用 Hooks

function GoodComponent({ isLoggedIn }) {
  const [count, setCount] = useState(0); // ✅ 顶层调用
  if (isLoggedIn) {
    // 在条件中使用状态，但不在条件中声明 Hook
    return <div>Count: {count}</div>;
  }
  return <div>Not logged in</div>;
}

---

2. 动态逻辑放在 Hooks 内部

如果需要在条件或循环中操作状态，可以将条件判断放在 Hook 的副作用内部：

function GoodComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // ✅ 条件判断在 useEffect 内部
    if (someCondition) {
      fetchData().then(setData);
    }
  }, [someCondition]);

  return <div>{data}</div>;
}

---

为什么必须遵守这条规则？

React 内部通过 调用顺序 来跟踪每个 Hook 的状态。例如：

function Example() {
  const [name, setName] = useState('Alice'); // Hook 1
  const [age, setAge] = useState(20);        // Hook 2
  useEffect(() => { ... });                  // Hook 3
}

React 会将这些 Hook 按顺序存储在一个“记忆单元”链表中：

Hook 1 → Hook 2 → Hook 3

如果某次渲染跳过了某个 Hook（比如因为条件语句），链表顺序会被破坏，导致后续所有 Hook 关联错误。

---

如何避免错误？

1. 使用 eslint-plugin-react-hooks
   官方提供的 ESLint 插件会强制检查 Hooks 规则，自动提示错误。
2. 拆分组件
   将条件或循环中的逻辑提取到子组件中，确保子组件内部 Hooks 在顶层调用。

   function Parent({ showCounter }) {
     return (
       <div>
         {showCounter && <ChildCounter />} {/* 子组件内部调用 Hook */}
       </div>
     );
   }
   
   function ChildCounter() {
     const [count, setCount] = useState(0); // ✅ 正确
     return <div>{count}</div>;
   }
   

---

总结

• Hooks 的调用顺序必须稳定，这是 React 正确管理状态的核心机制。
• 违反规则的后果：状态混乱、组件崩溃、难以调试的 bug。
• 正确做法：始终在函数组件的最外层作用域调用 Hooks，动态逻辑通过条件渲染或副作用内部处理。