Hook 的存储结构：为什么 Hook 必须在顶层调用？解析 Fiber 上的 `memoizedState` 链表

各位同学，大家好。

今天我们将深入探讨 React Hooks 的一个核心规则：“只在顶层调用 Hook”。这不仅仅是一个 linter 警告，也不是为了代码风格，而是 React 内部机制——特别是其 Fiber 架构和状态管理方式——所决定的根本性要求。我们将一起剥开 Hooks 的表象，直抵其在 Fiber 节点上 memoizedState 链表中的存储结构，从而彻底理解为何这个规则不可被打破。

1. Hooks 的诞生与规则的提出

React Hooks 是在 React 16.8 版本中引入的一项革命性特性，它允许你在不编写 class 的情况下使用 state 和其他 React 特性。Hooks 的出现，极大地简化了组件逻辑的复用和组织，使得函数组件能够拥有以前只有 class 组件才能拥有的“超能力”。

然而，伴随 Hooks 而来的，是两项被称为“规则”的限制：

1. 只在 React 函数组件或自定义 Hook 中调用 Hook。
2. 只在顶层调用 Hook。

第一条规则相对容易理解：Hooks 是 React 特性，自然只能在 React 的上下文中使用。但第二条规则——“只在顶层调用 Hook”——却常常让人感到困惑。为什么不能在 if 语句、for 循环或嵌套函数中调用 useState 或 useEffect 呢？这背后隐藏着 React 运行时的哪些秘密？

要解答这个问题，我们必须深入 React 的渲染机制，特别是其 Fiber 架构以及 Hook 状态在 Fiber 节点上的存储方式。

2. React 的 Fiber 架构：组件的内部表示

在理解 Hooks 之前，我们需要先了解 React 16 引入的 Fiber 架构。Fiber 是 React 内部用于构建用户界面的核心算法，它取代了之前的 Stack Reconciler。简单来说，Fiber 是 React 内部工作单元的抽象，它代表了应用中的一个组件、一个 DOM 元素或者其他任何可渲染的单元。

每个 Fiber 节点是一个普通的 JavaScript 对象，它包含了关于该组件实例的大量信息，例如：

• type: 组件的类型（例如，函数组件的函数本身，DOM 元素的字符串 ‘div’）。
• props: 组件接收的属性。
• stateNode: 对于宿主组件（如 DOM 元素），它指向实际的 DOM 节点；对于类组件，它指向组件实例；对于函数组件，它通常为 null。
• return: 指向父 Fiber 节点。
• child: 指向第一个子 Fiber 节点。
• sibling: 指向下一个兄弟 Fiber 节点。
• memoizedProps: 上一次渲染时使用的 props。
• memoizedState: 这是我们今天讨论的重点，它存储了组件的内部状态。对于类组件，它存储了组件的 state 对象；对于函数组件，它存储的是一个特殊的链表，即 Hook 状态链表。
• updateQueue: 存储了待处理的更新（例如 setState 调用）。

Fiber 架构允许 React 将渲染工作拆分成小块，并在浏览器空闲时执行，从而实现可中断、可恢复的渲染，提升用户体验。当 React 渲染一个组件时，它会遍历 Fiber 树，为每个组件创建一个 Fiber 节点，或者复用已有的 Fiber 节点并更新其属性。

3. memoizedState：Hook 状态的秘密链表

对于一个函数组件的 Fiber 节点，其 memoizedState 属性并不是一个简单的对象，而是一个指向链表头部的指针。这个链表中的每个节点都代表着该函数组件中一个 Hook 的状态。

让我们来详细看看这个链表结构：

FiberNode (代表一个函数组件，例如 <MyComponent />)
|
+-- memoizedState (指向第一个 HookStateNode)
    |
    +-- HookStateNode_1 (代表第一个 Hook，例如 useState(0) 的状态)
        |   .memoizedState: 0 (该 Hook 的实际状态值)
        |   .queue: { pending: null, lastRenderedReducer: ..., lastRenderedState: ... } (用于处理状态更新)
        |   .next: (指向下一个 HookStateNode)
        |
        +-- HookStateNode_2 (代表第二个 Hook，例如 useEffect(...) 的状态)
            |   .memoizedState: { create: fn, destroy: fn, deps: [...] } (Effect 的描述信息)
            |   .queue: null (useEffect 通常没有队列)
            |   .next: (指向下一个 HookStateNode)
            |
            +-- HookStateNode_3 (代表第三个 Hook，例如 useContext(...) 的状态)
                |   .memoizedState: { context: MyContext, observedBits: ... } (Context 相关的状态)
                |   .queue: null
                |   .next: null (链表末尾)

每个 HookStateNode 结构大致如下：

属性	描述
memoizedState	存储了该 Hook 的实际状态值。对于 useState 是状态值；对于 useEffect 是 effect 的描述对象。
queue	对于 useState 和 useReducer，这是一个环形链表，存储了待处理的更新（例如 setCount(c => c + 1)）。
next	指向该函数组件中下一个 Hook 的 HookStateNode。

这个链表的顺序，严格按照 Hook 在函数组件中被调用的顺序来排列。React 运行时通过一个内部指针 workInProgressHook（或者在某些语境下可以认为是 currentHook）来遍历这个链表，每次遇到一个 Hook 调用，就向前移动这个指针。

4. 渲染流程中的 Hook 解析

了解了 memoizedState 链表的结构后，我们就可以理解 React 在组件渲染过程中是如何处理 Hooks 的了。

4.1. 首次渲染 (Mount)

当一个函数组件首次渲染时，React 会执行以下步骤：

1. 初始化 Fiber 节点： React 为该函数组件创建一个新的 Fiber 节点。此时，该 Fiber 节点的 memoizedState 属性为 null。
2. 设置全局上下文： React 会设置一些内部的全局变量，例如 currentlyRenderingFiber 指向当前正在渲染的 Fiber 节点，workInProgressHook 指向 null。
3. 执行组件函数： React 调用你的函数组件。
4. 调用 Hook 函数： 当组件内部调用 useState()、useEffect() 等 Hook 函数时，React 会执行以下操作：
   • 创建新的 HookStateNode： 为当前的 Hook 创建一个新的 HookStateNode 对象。
   • 初始化状态： 根据 Hook 的类型和传入的参数，初始化 HookStateNode.memoizedState。例如，useState(0) 会将 0 存储到 memoizedState 中。
   • 链接到 Fiber：
     • 如果这是该组件的第一个 Hook，则 currentlyRenderingFiber.memoizedState 会指向这个新的 HookStateNode。
     • 如果这不是第一个 Hook，则上一个 Hook 的 HookStateNode.next 会指向这个新的 HookStateNode。
   • 更新 workInProgressHook： workInProgressHook 指针会向前移动，指向这个新创建的 HookStateNode，为下一个 Hook 调用做准备。
   • 返回状态/调度器： useState 返回其状态值和调度器函数（例如 setCount）。

通过这种方式，React 在首次渲染时，动态地为函数组件构建了一个 memoizedState 链表，其中每个节点对应一个 Hook，并按照调用顺序排列。

4.2. 后续渲染 (Update)

当一个函数组件因为 setState、props 变化或父组件重新渲染而需要更新时，React 会执行以下步骤：

1. 复用 Fiber 节点： React 找到并复用该函数组件的现有 Fiber 节点。此时，该 Fiber 节点的 memoizedState 已经是一个指向 Hook 链表的指针。
2. 设置全局上下文： currentlyRenderingFiber 再次指向当前 Fiber 节点，但这次 workInProgressHook 会被初始化为 currentlyRenderingFiber.memoizedState（即第一个 Hook 的状态节点）。
3. 执行组件函数： React 再次调用你的函数组件。
4. 调用 Hook 函数： 当组件内部调用 useState()、useEffect() 等 Hook 函数时，React 会执行以下操作：
   • 获取现有 HookStateNode： React 不会创建新的 HookStateNode。相反，它期望 workInProgressHook 已经指向了当前 Hook 对应的 HookStateNode。
   • 处理更新： React 从 workInProgressHook 中读取 memoizedState，并处理其 queue 中所有待处理的更新（例如，计算 useState 的新状态）。
   • 更新 workInProgressHook： workInProgressHook 指针会向前移动，指向当前 HookStateNode 的 next 属性所指向的下一个 HookStateNode，为下一个 Hook 调用做准备。
   • 返回状态/调度器： useState 返回其最新状态值和相同的调度器函数。

关键点在于： 在后续渲染中，React 完全依赖于 Hook 的调用顺序来匹配正确的 HookStateNode。它假定每次渲染时，Hooks 的调用顺序和数量都是完全一致的。workInProgressHook 就像一个游标，每次遇到 Hook 调用就向前一步，从链表中取出对应的状态。

5. 为什么 Hook 必须在顶层调用？

现在，我们终于可以回答核心问题了：为什么 Hook 必须在顶层调用？答案是：为了维护 memoizedState 链表的稳定性和可预测性。

如果 Hook 的调用顺序或数量在两次渲染之间发生变化，React 的内部 workInProgressHook 游标就会迷失方向，导致 Hook 状态与实际的 Hook 调用不匹配，从而引发难以预料的错误或应用崩溃。

让我们通过几个具体的反例来深入理解。

5.1. 反例一：在条件语句中调用 Hook

function MyComponent(props) {
    // Hook 1: useState
    const [count, setCount] = useState(0);

    // BAD: Hook 2 conditionally called
    if (props.showExtraFeature) {
        const [extraData, setExtraData] = useState('initial');
    }

    // Hook 3: useEffect
    useEffect(() => {
        console.log('Count changed:', count);
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            {props.showExtraFeature && <p>Extra Data: {extraData}</p>} {/* extraData might be undefined */}
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

分析：

1. 第一次渲染 (props.showExtraFeature 为 true)：

   • useState(0) 被调用（Hook 1）。React 创建 HookStateNode_1。
   • if (props.showExtraFeature) 条件为真。
   • useState('initial') 被调用（Hook 2）。React 创建 HookStateNode_2，并将其链接到 HookStateNode_1.next。
   • useEffect(...) 被调用（Hook 3）。React 创建 HookStateNode_3，并将其链接到 HookStateNode_2.next。
   • 此时，该 Fiber 节点的 memoizedState 链表结构是：Fiber -> H1 (count) -> H2 (extraData) -> H3 (effect)。

2. 第二次渲染 (props.showExtraFeature 变为 false)：

   • React 初始化 workInProgressHook 为 Fiber.memoizedState（即 H1）。
   • useState(0) 被调用（Hook 1）。React 从 workInProgressHook (H1) 读取 count 的状态。然后 workInProgressHook 前进到 H1.next (即 H2)。
   • if (props.showExtraFeature) 条件为假。useState('initial') (Hook 2) 被跳过。
   • 接下来，useEffect(...) 被调用（Hook 3）。React 期望 workInProgressHook 此时指向 H3。然而，workInProgressHook 当前指向的是 H2（extraData 的状态节点）！
   • 错误发生： React 会尝试从 H2 中读取或更新 useEffect 的状态，而不是正确的 H3。这会造成以下后果：
     • extraData 的状态节点被误认为是 useEffect 的状态节点。
     • useEffect 的状态节点 (H3) 将永远无法被访问和更新。
     • 你的 extraData 变量在 props.showExtraFeature 为 false 后，如果再次变为 true，useState('initial') 将会尝试创建新的 HookStateNode，或者从 H3 之后的节点开始，进一步混乱。
     • 最常见的结果是 React 抛出错误，提示 Hook 调用顺序不一致。

5.2. 反例二：在循环中调用 Hook

function MyComponent() {
    // BAD: Hook called in a loop
    for (let i = 0; i < 2; i++) {
        const [value, setValue] = useState(i); // This creates 2 Hooks if i=0 and i=1
    }

    const [finalValue, setFinalValue] = useState(100); // Hook after loop

    return (/* ... */);
}

分析：

1. 第一次渲染：

   • 循环第一次迭代 (i=0)：useState(0) 被调用。React 创建 HookStateNode_1。
   • 循环第二次迭代 (i=1)：useState(1) 被调用。React 创建 HookStateNode_2，并将其链接到 HookStateNode_1.next。
   • useState(100) 被调用。React 创建 HookStateNode_3，并将其链接到 HookStateNode_2.next。
   • 链表结构：Fiber -> H1 (value for i=0) -> H2 (value for i=1) -> H3 (finalValue)。

2. 后续渲染 (假设循环条件或次数变化)：

   • 如果循环次数变为 1：useState(0) 被调用。workInProgressHook 变为 H2。接下来的 useState(100) 就会尝试从 H2 读取状态，而不是 H3。
   • 如果循环次数变为 3：前两个 useState 调用会复用 H1 和 H2。第三次迭代的 useState 将没有对应的 HookStateNode 可用，它会尝试在链表末尾创建新的节点，或者 React 会报错。

循环中的 Hook 调用会导致 Hook 链表的长度在不同渲染之间发生变化，或者在单次渲染中多次尝试复用同一个 Hook 节点，这都会彻底破坏 Hook 机制。

5.3. 反例三：在嵌套函数中调用 Hook

function MyComponent() {
    const [count, setCount] = useState(0); // Hook 1

    const handleClick = () => {
        // BAD: Hook called inside a nested function
        const [clicked, setClicked] = useState(false); // Hook 2
        setClicked(true);
    };

    return (
        <button onClick={handleClick}>Click Me ({count})</button>
    );
}

分析：

1. 渲染 MyComponent 时：

   • useState(0) 被调用。React 创建 HookStateNode_1。
   • handleClick 函数被定义，但其内部的 useState(false) 并未执行。
   • 链表结构：Fiber -> H1 (count)。

2. 用户点击按钮，handleClick 被调用时：

   • 此时，React 的渲染上下文已经结束。currentlyRenderingFiber 和 workInProgressHook 等内部指针已经不再指向 MyComponent 的 Fiber 节点。
   • 当 useState(false) 被调用时，它发现自己不在一个“正在渲染的函数组件”的顶层上下文中。
   • 错误发生： React 的 ReactCurrentDispatcher 会发现当前没有激活的调度器，或者调度器指向的是一个不相关的 Fiber，从而抛出错误，通常是 Error: Invalid Hook call. Hooks can only be called inside of the body of a function component.

Hooks 必须在组件函数被 React 执行（作为渲染过程的一部分）时才能被调用。嵌套函数，包括事件处理函数、setTimeout 回调等，在组件渲染完成后才会被执行，此时 React 的内部状态管理机制已经不再准备好处理 Hook 调用了。

6. 顶层调用与自定义 Hooks

理解了上述原理，我们就能明白“顶层调用”的真正含义：Hook 必须在函数组件的直接函数体内部被调用，而不是被条件、循环或任何嵌套函数所包裹。

那么，如果我们需要在不同条件下使用不同的逻辑，或者需要复用状态逻辑怎么办？答案就是 自定义 Hooks。

6.1. 自定义 Hook 的本质

自定义 Hook 只是一个普通的 JavaScript 函数，其名称以 use 开头，并且可以在其内部调用其他 Hook。

// my-custom-hook.js
function useToggle(initialValue = false) {
    const [value, setValue] = useState(initialValue); // Hook 1 inside custom Hook

    const toggle = useCallback(() => {
        setValue(prev => !prev);
    }, []);

    return [value, toggle];
}

// MyComponent.js
function MyComponent(props) {
    const [isOn, toggle] = useToggle(false); // Custom Hook called at top level

    // Conditional logic based on state, not conditional Hook call
    if (props.showConditionalContent) {
        return (
            <div>
                <button onClick={toggle}>
                    {isOn ? 'Turn Off' : 'Turn On'}
                </button>
                {isOn && <p>Conditional content is visible!</p>}
            </div>
        );
    }

    return (
        <button onClick={toggle}>
            {isOn ? 'Turn Off' : 'Turn On'}
        </button>
    );
}

分析：

当 MyComponent 渲染时：

1. useToggle(false) 被调用。
2. 在 useToggle 内部，useState(initialValue) 被调用。
3. 这个 useState 调用发生时，React 的 currentlyRenderingFiber 和 workInProgressHook 都指向 MyComponent 的 Fiber 节点，并且 workInProgressHook 会正确地前进。
4. useCallback 也会被正确处理。

从 MyComponent 的角度看，useToggle 就像一个单独的 Hook 调用。无论是 useToggle 还是它内部的 useState 和 useCallback，它们都在 MyComponent 渲染的同一时间点、同一上下文中被调用，并按照确定的顺序被添加到 MyComponent 的 memoizedState 链表中。

自定义 Hook 机制有效地将一组相关的 Hook 调用封装起来，并在组件的顶层以一个稳定的、可预测的顺序进行调用，从而完美地遵循了“只在顶层调用 Hook”的规则。

7. 深入 useState 的内部模拟

为了更清晰地理解 Hook 如何在内部管理状态，让我们看一个高度简化的 useState 内部实现模拟。请注意，这只是一个概念模型，实际的 React 源码要复杂得多。

// React 内部的全局变量，在每次组件渲染前被设置
let currentlyRenderingFiber = null; // 指向当前正在处理的 Fiber 节点
let workInProgressHook = null;    // 指向当前正在处理的 Hook 节点

// 模拟 HookStateNode 结构
class HookStateNode {
    constructor(memoizedState, queue = null) {
        this.memoizedState = memoizedState;
        this.queue = queue; // For useState/useReducer
        this.next = null;
    }
}

// ------------------- Mount Phase (首次渲染) -------------------
function mountState(initialState) {
    // 1. 创建新的 HookStateNode
    const hook = new HookStateNode(
        typeof initialState === 'function' ? initialState() : initialState,
        {
            pending: null, // 待处理的更新队列 (环形链表)
            lastRenderedReducer: baseState => baseState, // 简化，实际更复杂
            lastRenderedState: null // 简化
        }
    );

    // 2. 将 HookStateNode 链接到 Fiber 的 memoizedState 链表
    if (!currentlyRenderingFiber.memoizedState) {
        // 这是该 Fiber 的第一个 Hook
        currentlyRenderingFiber.memoizedState = hook;
    } else {
        // 链接到前一个 Hook 的 next 属性
        workInProgressHook.next = hook;
    }
    // 3. 更新 workInProgressHook 指针，为下一个 Hook 做准备
    workInProgressHook = hook;

    // 4. 创建并返回 dispatch 函数 (setCount)
    const dispatch = (action) => {
        // 简化：实际会创建一个更新对象并添加到 hook.queue.pending
        // 然后调度一次 React 更新
        console.log(`Scheduling update for Hook with action: ${action}`);
        // 实际会在这里将更新加入队列，并触发re-render
        // 假设我们直接更新了状态，但这会导致非批处理，React实际是批处理的
        // hook.memoizedState = typeof action === 'function' ? action(hook.memoizedState) : action;
        // triggerReRender(currentlyRenderingFiber);
    };

    return [hook.memoizedState, dispatch];
}

// ------------------- Update Phase (后续渲染) -------------------
function updateState() {
    // 1. 获取当前 HookStateNode
    const hook = workInProgressHook;

    // 2. 更新 workInProgressHook 指针，为下一个 Hook 做准备
    //    这是最关键的一步：每次调用 Hook 都会推进指针
    workInProgressHook = hook.next;

    // 3. 处理更新队列 (如果存在 pending updates)
    let newState = hook.memoizedState;
    if (hook.queue && hook.queue.pending) {
        // 简化：遍历队列并应用更新
        // 假设 pending 是一个简单的数组，实际是环形链表
        let currentUpdate = hook.queue.pending;
        do {
            const action = currentUpdate.action;
            newState = typeof action === 'function' ? action(newState) : action;
            currentUpdate = currentUpdate.next;
        } while (currentUpdate !== hook.queue.pending);
        hook.queue.pending = null; // 清空已处理的队列
    }
    hook.memoizedState = newState;

    // 4. 返回状态和 dispatch 函数
    //    dispatch 函数在整个组件生命周期内都是稳定的引用
    const dispatch = (action) => {
        console.log(`Dispatching update for Hook with action: ${action}`);
        // 实际会在这里将更新加入队列，并触发re-render
    };

    return [hook.memoizedState, dispatch];
}

// ------------------- React 内部的调度器 (概念模型) -------------------
const ReactCurrentDispatcher = {
    current: null, // 在渲染不同阶段指向不同的实现
};

// 模拟 React 的渲染函数
function renderComponent(Fiber, isMount) {
    currentlyRenderingFiber = Fiber;
    workInProgressHook = isMount ? null : Fiber.memoizedState; // 首次渲染从 null 开始，后续渲染从链表头部开始

    // 在渲染函数组件之前，设置 dispatcher
    if (isMount) {
        ReactCurrentDispatcher.current = {
            useState: mountState,
            // ... 其他 mount Hooks
        };
    } else {
        ReactCurrentDispatcher.current = {
            useState: updateState,
            // ... 其他 update Hooks
        };
    }

    // 调用你的函数组件
    const YourComponent = Fiber.type; // 假设 Fiber.type 就是组件函数
    const elements = YourComponent(Fiber.props); // 执行组件函数，Hooks 在这里被调用

    // 渲染完成后清除
    currentlyRenderingFiber = null;
    workInProgressHook = null;
    ReactCurrentDispatcher.current = null;

    return elements; // 返回 JSX 元素
}

// ------------------- 你的 useState 实现 -------------------
function useState(initialState) {
    // 你的 Hook 调用最终会通过这个 dispatcher 路由到内部实现
    if (!ReactCurrentDispatcher.current || !ReactCurrentDispatcher.current.useState) {
        throw new Error("Invalid Hook call. Hooks can only be called inside of the body of a function component.");
    }
    return ReactCurrentDispatcher.current.useState(initialState);
}

// ------------------- 示例用法 -------------------

// 模拟一个 Fiber 节点
const myComponentFiber = {
    type: function MyCounter() {
        const [count, setCount] = useState(0); // Hook 1
        const [text, setText] = useState('hello'); // Hook 2

        // console.log(`Render: count=${count}, text=${text}`);

        // 模拟交互
        setTimeout(() => {
            // 这会调用 dispatch 函数，但目前模拟的dispatch不会真正触发re-render
            // setCount(c => c + 1);
            // setText('world');
        }, 1000);

        return `<div>Count: ${count}, Text: ${text}</div>`;
    },
    props: {},
    memoizedState: null, // 初始为 null
};

console.log("--- Initial Mount ---");
renderComponent(myComponentFiber, true);
console.log("After Mount Fiber's memoizedState:", JSON.stringify(myComponentFiber.memoizedState, (key, value) => {
    if (key === 'next') return '-> next Hook'; // 防止循环引用
    if (key === 'queue') return '{ ... queue ... }';
    return value;
}, 2));
/*
Expected output after mount (conceptual):
Fiber -> HookStateNode_1 (count: 0) -> HookStateNode_2 (text: 'hello')
*/

// 模拟更新
// 假设这里有一些机制让 Hook.queue.pending 被填充，并触发 re-render
myComponentFiber.memoizedState.queue.pending = { action: 1, next: null }; // 模拟 count + 1
myComponentFiber.memoizedState.next.queue.pending = { action: 'world', next: null }; // 模拟 text = 'world'

console.log("n--- Subsequent Update ---");
renderComponent(myComponentFiber, false);
console.log("After Update Fiber's memoizedState:", JSON.stringify(myComponentFiber.memoizedState, (key, value) => {
    if (key === 'next') return '-> next Hook';
    if (key === 'queue') return '{ ... queue ... }';
    return value;
}, 2));
/*
Expected output after update (conceptual):
Fiber -> HookStateNode_1 (count: 1) -> HookStateNode_2 (text: 'world')
*/

// 模拟 Hook 顺序被破坏的场景 (假设在 update 时跳过了一个 Hook)
console.log("n--- Simulating broken Hook order ---");
// 假设组件变成了
const myBrokenComponentFiber = {
    type: function MyBrokenCounter() {
        if (false) { // Conditionally skip Hook 1 during update
            useState(0);
        }
        const [text, setText] = useState('hello'); // This is now Hook 1 in this render
        return `<div>Text: ${text}</div>`;
    },
    props: {},
    memoizedState: null,
};

// 先进行一次正常 mount，建立 Hook 链表
renderComponent(myComponentFiber, true); // Use the original component for mount
console.log("Original Fiber after mount (for comparison):", JSON.stringify(myComponentFiber.memoizedState, (key, value) => {
    if (key === 'next') return '-> next Hook';
    if (key === 'queue') return '{ ... queue ... }';
    return value;
}, 2));

// 现在尝试用破坏顺序的组件类型进行 update
// 此时 myComponentFiber.memoizedState 依然指向 HookStateNode_1 (count:0)
// 但 MyBrokenCounter 首次调用的 useState 是针对 text
try {
    console.log("nAttempting to render MyBrokenCounter (will fail):");
    // 为了模拟，我们暂时修改 myComponentFiber 的类型来调用 MyBrokenCounter
    const originalType = myComponentFiber.type;
    myComponentFiber.type = myBrokenComponentFiber.type;
    renderComponent(myComponentFiber, false); // Attempt update with broken order
} catch (e) {
    console.error("Caught error:", e.message);
    // 实际 React 错误会是 "Rendered fewer hooks than expected" 或 "Rendered more hooks than expected"
    // 或者直接状态错乱
} finally {
    myComponentFiber.type = originalType; // 恢复
}

这段模拟代码展示了以下关键点：

• currentlyRenderingFiber 和 workInProgressHook 是 React 内部用于跟踪当前渲染上下文和 Hook 进度的全局指针。
• mountState 在首次渲染时创建新的 HookStateNode 并将其链接起来。
• updateState 在后续渲染时，简单地从 workInProgressHook 读取现有 HookStateNode 的状态，然后将 workInProgressHook 推进到链表的下一个节点。
• useState 函数本身只是一个薄薄的包装器，它根据当前的 ReactCurrentDispatcher 来调用 mountState 或 updateState 的实际实现。

如果 workInProgressHook 的推进顺序与 memoizedState 链表的结构不符（例如，因为条件跳过了 Hook），那么 updateState 就会尝试从错误的 HookStateNode 中读取状态，或者在链表末尾找不到预期的节点，从而导致错误。

8. 总结

Hooks 的“只在顶层调用”规则并非武断，而是 React Fiber 架构中 memoizedState 链表这一核心机制的必然要求。

1. 每个函数组件的 Fiber 节点通过其 memoizedState 属性维护一个内部 Hook 状态链表。
2. 链表中的每个节点对应一个 Hook，并严格按照 Hook 在组件中被调用的顺序排列。
3. 在每次渲染时，React 内部通过一个游标（workInProgressHook）遍历这个链表，并期望每次 Hook 调用都与链表中的下一个节点精确匹配。
4. 任何导致 Hook 调用顺序或数量在不同渲染之间发生变化的行为（如条件语句、循环、嵌套函数），都会破坏这个匹配机制，导致状态错乱或运行时错误。
5. 自定义 Hook 通过将一组 Hook 封装在一个函数中，并在组件顶层以稳定的顺序调用这个自定义 Hook，从而巧妙地解决了这个问题。

理解这些底层原理，不仅能帮助我们更好地遵守 Hooks 的规则，还能让我们更深入地体会 React 框架设计的精妙之处。Hooks 的简洁背后，是严谨而高效的内部状态管理机制在支撑。