React Hooks为什么不能写在条件语句里？链表实现原理

React 要求 Hooks 在组件顶层按完全相同的顺序被调用。这一约束源于其底层实现：链表。一旦顺序改变，React 无法正确复用之前的 Hook 状态，导致 Bug。

1. 理解核心机制：Fiber 节点与 Hooks 链表

React 内部使用 Fiber 节点来表示组件结构。每个组件（Fiber 节点）维护一个单向链表，用来存储该组件内所有 Hook 的数据。

查看 下面的逻辑模型：

记住 两个关键概念：

1. memoizedState：指向该组件当前正在使用的第一个 Hook。
2. next：每个 Hook 对象都有一个 next 指针，指向下一个 Hook。

2. 模拟正常渲染流程

假设有一个组件，按顺序调用了三个 Hook。

编写 代码如下：

function App() {
  const [name, setName] = useState('Alice'); // Hook 1
  useEffect(() => { console.log('Effect'); }); // Hook 2
  const [age, setAge] = useState(25); // Hook 3
  return <div>{name}</div>;
}

执行 首次渲染时，React 会构建一个链表：

React 维护一个内部指针 workInProgressHook。每调用一个 Hook，React 读取 当前指针指向的数据，并将指针移动到下一个节点（next）。

3. 模拟条件语句导致的灾难

现在，尝试将第二个 Hook 放入 if 语句中。

编写 错误示范代码：

function App() {
  const [name, setName] = useState('Alice'); // Hook 1
  let isValid = true;

  if (isValid) {
    useEffect(() => { console.log('Effect'); }); // Hook 2
  }

  const [age, setAge] = useState(25); // Hook 3
  return <div>{name}</div>;
}

分析 当 isValid 发生变化时的渲染过程：

阶段一：第一次渲染 (isValid 为 true)

1. 调用 useState('Alice')。指针指向 Hook 1，匹配成功。指针移动到 Hook 2。
2. 调用 useEffect。指针指向 Hook 2，匹配成功。指针移动到 Hook 3。
3. 调用 useState(25)。指针指向 Hook 3，匹配成功。链表构建完成。

阶段二：第二次渲染 (isValid 变为 false)

1. 调用 useState('Alice')。指针指向 Hook 1。React 识别出这是第一个 Hook，复用数据。指针移动到 Hook 2。
2. 执行 if (isValid) 语句。条件为假，跳过 useEffect。
3. 调用 useState(25)。
   • 此时，React 的内部指针仍然停留在 Hook 2。
   • 但代码实际执行的是组件里的第三个 Hook 逻辑。
   • React 强行将 Hook 2（原本是 useEffect 的数据）当作 useState 返回。
   • 结果：age 变量接收到了 effect 函数对象，而不是数字 25。程序崩溃或产生不可预知的行为。

4. 深入源码逻辑

React 判断当前 Hook 是否匹配，完全依赖于调用顺序，而非 Hook 的名称或类型。

观察 简化后的源码逻辑：

let workInProgressHook = null; // 当前工作的 Hook 指针

function updateWorkInProgressHook() {
  // 获取下一个 Hook
  let nextCurrentHook;

  if (currentHook === null) {
    // 如果是链表的第一个 Hook
    const fiber = getCurrentlyRenderingFiber();
    nextCurrentHook = fiber.memoizedState;
  } else {
    // 否则，顺着 next 指针往下找
    nextCurrentHook = currentHook.next;
  }

  // 将当前指针后移
  currentHook = nextCurrentHook;

  // 创建新的 Hook 对象，复用旧 Hook 的 state
  workInProgressHook = {
    memoizedState: currentHook.memoizedState,
    next: null,
  };

  return workInProgressHook;
}

注意 这段代码的逻辑：

• 它不知道你现在调用的是 useState 还是 useEffect。
• 它只管按顺序从链表上取下一个节点。
• 如果你跳过了一个调用（比如因为 if），链表上的节点就不会被消费，导致后续的节点全部错位。

5. 解决方案

要修复这个问题，必须确保 Hooks 的调用顺序在多次渲染间保持一致。

遵循 以下原则：

1. 移除 所有包裹 Hook 的条件判断（if）。
2. 移除 所有包裹 Hook 的循环（for, while）。
3. 将 条件逻辑放在 Hook 内部。

修改 之前的错误代码：

function App() {
  const [name, setName] = useState('Alice'); // 保持顺序 1
  let isValid = true;

  // 保持顺序 2：逻辑移入 useEffect 内部
  useEffect(() => { 
    if (isValid) {
      console.log('Effect');
    } 
  }, [isValid]); 

  const [age, setAge] = useState(25); // 保持顺序 3
  return <div>{name}</div>;
}

验证 修复后的流程：
无论 isValid 是什么值，React 永远按 Hook 1 -> Hook 2 -> Hook 3 的顺序读取链表。Hook 2 始终存在，只是内部逻辑决定是否执行副作用。

6. 特殊情况：早期返回

组件中的 return 语句也必须放在所有 Hooks 之后。

错误 写法：

function App() {
  const [name, setName] = useState('Alice');

  if (!name) {
    return <div>Loading...</div>; // 错误：提前终止，导致后面的 Hook 未执行
  }

  useEffect(() => { ... }); // 这次渲染被跳过
  const [age, setAge] = useState(25);
}

修正 写法：

function App() {
  const [name, setName] = useState('Alice');
  const [age, setAge] = useState(25);
  useEffect(() => { ... });

  if (!name) {
    return <div>Loading...</div>; // 正确：在所有 Hook 之后
  }

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

确保 Hooks 调用的“数量”和“顺序”在每次渲染时完全一致，是 React Hooks 正常工作的基础。