React Hooks 链表在 Fiber 节点上的物理存储：深度解析 memoizedState 指针在组件重渲染时的线性偏移算法

各位同学好，欢迎来到 React 内部原理的“暗黑时刻”。

今天我们不谈 UI，不谈组件树，也不谈那些花里胡哨的 API。今天我们要深入 React 最核心、最隐秘，也是最容易让人脑壳疼的角落——Fiber 节点上的物理存储。

具体来说，我们要聊聊那个传说中的 memoizedState 指针，以及它是如何在组件重渲染时，通过一种类似“线性偏移”的机制，维持 Hooks 状态的连续性的。

你可能会说：“React Hooks 不是简单的变量吗？为什么非要用链表？我直接存个对象不行吗？”

抱歉，朋友，如果你在面试里这么回答，大概率会被面试官用一种看外星人的眼神看着你。React 团队之所以选择链表，是因为他们在和“可变性”和“并发渲染”这两个恶魔博弈。

今天，我们就把 React 的 Fiber 节点打开，把那个 memoizedState 指针拿出来，放在显微镜下，看看它是怎么跳一支华尔兹的。

---

第一部分：布丁，看得到，吃得到

首先，让我们把目光聚焦在 FiberNode 上。这是 React 构建组件树的积木。每一个组件渲染一次，就会生成一个 Fiber 节点。

这个节点上有一个核心属性：memoizedState。

在大多数人的认知里，memoizedState 就是一个变量，比如 count 或者 list。但错了，大错特错。

memoizedState 是一个指针。

它是一个指向链表头节点的指针。而且，这个链表里的每一个节点，不仅仅存了一个值，它还存了其他很多乱七八糟的东西。这就好比你在参加一个聚会，聚会门口有一个服务员，手里拿着一张名单（头指针）。你走进去，发现名单上的第一个人不是你，而是他手里的引线，牵着他后背挂着的一张照片。你顺着引线走到第二个人，发现他又牵着第三个人……

这就是链表。而我们的 memoizedState，就是门口那个服务员，他手里拿着名单。

为什么是链表？因为 React 的渲染是递归的。当一个组件在渲染时，它需要依次调用它的子组件。如果你把状态存在一个扁平的数组里，那你每次渲染子组件时，都得把数组传下去，还要处理边界问题。这就像你为了跟儿子说话，每次都要把全家户口本都背在他身上，多累啊。

用链表，React 只需要把头指针传下去，子组件渲染完返回后，再拿回头指针，就像接力赛一样，轻松搞定。

---

第二部分：渲染时的“指针碰撞”

好了，概念铺垫完了。现在，让我们模拟一下组件重渲染的瞬间。

假设我们有一个极其简单的组件：

function Counter() {
  const [count, setCount] = useState(0);
  return <div>{count}</div>;
}

在 React 的眼里，第一次渲染时，这个组件的 FiberNode.memoizedState 是 null。

好，现在我们调用 setCount(1)。React 在提交阶段干了什么？它创建了一个更新队列，把更新推入队列，然后重新触发渲染。

注意，这是重点：渲染阶段会创建一个新的链表。

当你第二次调用 Counter 函数时，React 并没有去问旧的 Fiber 节点：“嘿，旧的状态还在吗？给我看看。”（虽然理论上它可以通过调度器找到，但渲染阶段最重要的是“构建新世界”）。

渲染阶段发生的事情是：

1. 遍历 Hooks：React 从头开始执行 Counter 函数。
2. 初始化：遇到第一个 Hook useState。React 检查 memoizedState。此时，memoizedState 是第一次渲染时建立的那个链表的指针。
3. 读取：它顺着指针，找到了链表中的第一个节点。这个节点告诉我们，当前的计数是 0。
4. 更新：因为 setCount(1) 被调用了，React 构建了一个新的状态值 1，以及一个包含更新逻辑的队列。

关键来了：物理存储发生了什么偏移？

React 并没有修改第一次渲染那个链表里的数字 0。它做的是：在内存中开辟了一块新空间，创建了一个新的链表节点。

这个新节点的指针，指向前一次渲染时的那个链表节点。

这就构成了我们说的“线性偏移”。

// 伪代码：内存视角的物理存储
// 第一次渲染
const fiber1 = {
  memoizedState: {
    state: 0,
    queue: { updates: [] },
    next: null // 链表结束
  }
};

// 调用 setCount(1) 后，触发第二次渲染
const fiber2 = {
  memoizedState: {
    // 新链表节点
    state: 1, 
    queue: { updates: [...] },
    next: null 
  }
};

// 此时，Fiber2 的逻辑是：
// memoizedState 指向新节点
// 但这个新节点里，可能藏着一个指向 Fiber1 memoizedState 的指针？
// 不，等等。通常 useEffect 的清理依赖这个。
// 对于 useState，它通常是从头遍历。

等等，让我们修正一下对 memoizedState 链表结构的理解。

在 React 内部，memoizedState 链表存储的是当前渲染周期中已经处理的 Hooks 的状态。

当我们渲染 useState(0) 时，memoizedState 指向一个节点，节点里包含 state: 0。

当我们渲染 useState(1) 时（假设组件里有两个 state），React 需要获取第二个 state 的值。
它怎么做？它顺着当前 Fiber 节点的 memoizedState 指针往下走。

如果当前 memoizedState 指向一个节点（那是第一个 state 的节点），React 会认为这个节点已经处理完了，于是读取这个节点的 next 指针。

物理偏移发生了：
当前的 memoizedState 指针（第一次渲染的残留）被“推”到了一边，指向了一个新生成的节点。这个新生成的节点里，包含了我们这次渲染想要用的值（比如从 queue 里计算出来的值）。

---

第三部分：深入 useState 的链表逻辑

让我们来写一段模拟代码，看看这个链表是如何在内存中“生长”的。这非常有意思，就像看着细菌培养皿里的菌落分裂。

class HookNode {
  state; // 当前状态的值
  queue; // 待处理的更新队列
  next;  // 指向链表中的下一个 Hook 节点

  constructor(state, queue, next = null) {
    this.state = state;
    this.queue = queue;
    this.next = next;
  }
}

// 模拟 React 的渲染环境
let currentFiber = {
  memoizedState: null // 头指针
};

function renderHook(initState) {
  // 1. 检查当前 memoizedState 是否有值
  // 如果为 null，说明这是组件里的第一个 Hook
  if (currentFiber.memoizedState === null) {
    // 初始化状态
    currentFiber.memoizedState = new HookNode(initState, null, null);
    return currentFiber.memoizedState.state;
  }

  // 2. 如果有值，说明我们已经渲染过这个组件了，或者还有其他 Hooks
  // 我们需要“往下走”。
  // 注意：这里的逻辑简化了。实际 React 会用 dispatchAction 获取队列。

  let hook = currentFiber.memoizedState;
  let nextState = hook.state; // 获取当前链表头指向的 state

  // 3. “线性偏移”的核心：指针移动
  // 我们取出当前的 state，构造一个新的 HookNode
  // 并把这个新节点挂在链表上
  // 此时，旧的 hook 节点变成了这个新节点的 next
  const nextHook = new HookNode(nextState, null, hook); 
  currentFiber.memoizedState = nextHook;

  return nextHook.state;
}

// 模拟 useState
function useState(initialState) {
  // 这是一个简化版，没有处理 lazy initialization
  return renderHook(initialState);
}

// --- 模拟执行 ---

// 第一次渲染
// 组件 A
console.log("--- 第一次渲染 ---");
// 此时 currentFiber.memoizedState 是 null
let countA = useState(10); 
// 逻辑：currentFiber.memoizedState 变成了 {state:10, next:null}

// 组件 B (嵌套组件)
// currentFiber.memoizedState 已经不是 null 了，所以会往下走
let countB = useState(20); 
// 逻辑：我们找到了 {state:10}，它是 next。我们新建了 {state:20, next:{state:10}}
// currentFiber.memoizedState 变成了 {state:20, next:{state:10}}

// 打印内存结构
console.log(JSON.stringify(currentFiber.memoizedState, (key, value) => {
    return value === null ? "null" : (typeof value === 'object' ? "HookNode" : value);
}, 2));

看懂了吗？这就是“线性偏移”。

第一次渲染：
memoizedState -> Node(10)

第二次渲染（假设 countA 变了，countB 也变了）：

1. useState(10) 再次执行。
2. React 看到 memoizedState 不为空，于是偏移指针。它取出了当前值 10，创建了一个新的 Node(10)。
3. 这个新 Node(10) 的 next 指向了旧的 Node(10)。
4. memoizedState 现在指向这个新的 Node(10)。

这导致了什么后果？
下一次渲染 useState(20) 时，React 会顺着指针走。它拿到的是新的 Node(10)，然后读取它的 next，得到旧的 Node(10)，以此类推。

这听起来像是在做内存拷贝，但非常高效。因为 React 不仅仅是读取数据，它还在构建更新队列。新节点的 queue 会引用之前的 queue，形成一种类似于快照的机制。

---

第四部分：useEffect 的“双面镜”偏移算法

如果说 useState 是简单的指针推拉，那么 useEffect 就是 React 的魔术戏法，也是 memoizedState 链表最复杂的应用场景。

当你写 useEffect(() => { ... }, [count]) 时，React 需要在渲染完成、提交到 DOM 之前，做两件事：

1. 如果依赖项变了，先运行上一个 Effect 的清理函数（cleanup）。
2. 运行当前的 Effect。

要完成第 1 点，React 必须能够访问到“上一个”渲染周期的 Effect 信息。

这是怎么做到的？靠的依然是 memoizedState 的偏移。

让我们看看 useEffect 是怎么把旧状态保留下来的。

function useEffect(create, deps) {
  // 在渲染阶段，创建一个 Effect 节点
  const effect = {
    create, 
    deps,
    // 关键点在这里！
    // 这个 effect 的 memoizedState 指向当前的 memoizedState 链表
    // 也就是指向前一次渲染时的整个 Hook 链表！
    memoizedState: currentFiber.memoizedState 
  };

  // 现在的 memoizedState 指向这个新创建的 effect
  currentFiber.memoizedState = effect;

  // 最后，把 effect 链接到 FiberNode 的 effects 数组中
  currentFiber.effects.push(effect);
}

物理偏移揭秘：

假设第一次渲染：

1. 组件渲染。
2. useState -> 创建节点 A。
3. useEffect -> 创建节点 B。
   • 节点 B 的 memoizedState 指向节点 A。
   • Fiber 的 memoizedState 指向节点 B。
   • Fiber 的 effects 数组有 [B]。

第二次渲染：

1. 组件渲染。
2. useState -> 创建节点 C（C.next = A）。
3. useEffect -> 创建节点 D。
   • 这一步是重头戏：节点 D 的 memoizedState 指向 currentFiber.memoizedState。
   • 此时 currentFiber.memoizedState 指向的是节点 B（上一次渲染时的最后一个 Effect）。
   • 所以，节点 D 的 memoizedState 指向了节点 B。

现在，我们完成了所有渲染，要执行 Effects 了。

React 会遍历 currentFiber 的 effects 数组。

• 第一个 Effect（节点 D）被处理。
• 它检查 deps。如果变了，它会运行 nodeD.memoizedState.create（这是当前 Effect）。
• 但是！ 它还需要运行清理函数。清理函数来自哪里？
• 它来自 nodeD.memoizedState（即节点 B）。

于是，React 拿到了节点 B（上一次的 Effect），运行它的 create 函数（也就是清理函数），然后更新 DOM。

这就是所谓的“线性偏移”带来的价值：我们通过指针的偏移，在新的内存空间里，保留了旧内存空间（上一次渲染）的完整副本。

这就像你在拍电影，每拍完一幕，就把这一幕的胶卷存进箱子。下一幕开拍前，你会从箱子里拿出上一幕的胶卷进行剪辑（清理），然后再把新的胶卷放进去。

---

第五部分：内存地址的华尔兹

让我们把视角拉高，看看这些指针在物理内存中的移动轨迹。

想象一下内存地址：
0x1000 (Fiber 节点)
0x2000 (Hook Node 1 – 第一个 useState)
0x3000 (Hook Node 2 – 第二个 useState)
0x4000 (Hook Node 3 – useEffect)

场景一：第一次渲染

1. Fiber 指向 0x2000。
2. 0x2000 指向 0x3000。
3. 0x3000 指向 0x4000。

场景二：重渲染（数据更新）

1. Fiber 还是 0x1000，但它的 memoizedState 指针被重新赋值了。
2. React 重新计算 Hooks。
3. 步骤 A：处理第一个 useState。它创建 0x5000（新节点）。0x5000 的 next 指向 0x2000（旧节点）。Fiber 现在指向 0x5000。
4. 步骤 B：处理第二个 useState。它创建 0x6000。0x6000 的 next 指向 0x5000。
5. 步骤 C：处理 useEffect。它创建 0x7000。0x7000 的 memoizedState 指向 0x1000.memoizedState（也就是 0x5000）。

执行阶段：

1. React 遍历 Fiber 的 effects 数组。
2. 找到 0x7000（当前 Effect）。
3. 运行 0x7000.create。
4. 找到 0x7000.memoizedState（也就是 0x5000）。
5. 找到 0x5000 的 memoizedState。
6. 等等，0x5000 是第一个 useState 的节点。它的 memoizedState 在第一次渲染时可能是 0x4000（第一个 useEffect 节点）。
7. 啊哈！ 这意味着通过节点 D (0x7000)，我们实际上通过链式引用，找到了节点 A (0x5000) 的 memoizedState，也就是找到了第一次渲染时的链表头。

这种层层嵌套的指针回溯，就是 useEffect 能够找到旧依赖项进行清理的物理基础。

---

第六部分：代码实战——手写一个简易版 Hooks

为了让你彻底掌握这个“线性偏移算法”，我决定抛弃所有 React 内部代码，写一个最纯粹的 JS 版本。这个版本会模拟 Fiber 的行为，让你看到指针是如何像贪吃蛇一样吞噬旧状态的。

请深呼吸，准备好你的大脑。

/**
 * 模拟 React 内部的 Hook 节点
 * 包含：状态值、队列（更新）、next（指向下一个 Hook）
 */
class HookNode {
  constructor(state = null, queue = null, next = null) {
    this.state = state; // 当前渲染产生的状态值
    this.queue = queue; // 待处理的更新任务
    this.next = next;   // 指向链表中的下一个 Hook
  }
}

/**
 * 模拟 Fiber 节点
 */
class FiberNode {
  constructor() {
    // 核心：memoizedState 指针，指向当前渲染产生的链表头
    this.memoizedState = null; 
    // effects 数组，存储所有的 useEffect 相关节点
    this.effects = [];
  }
}

// 全局变量模拟调度器
let currentFiber = null;

/**
 * 初始化渲染环境
 */
function initRender(fiber) {
  currentFiber = fiber;
}

/**
 * useState 的实现
 * 这是一个递归函数，每调用一次，链表就增长一个节点
 */
function useState(initialState) {
  // 1. 获取当前 Fiber 的 memoizedState 指针
  let hookNode = currentFiber.memoizedState;

  // 2. 如果 memoizedState 为空，说明这是该组件里的第一个 Hook
  if (hookNode === null) {
    // 创建初始 Hook 节点
    // 这里简化处理，直接返回初始值，没有处理 lazy 初始化
    currentFiber.memoizedState = new HookNode(initialState, null, null);
    return currentFiber.memoizedState.state;
  }

  // 3. 如果不为空，说明已经处理过之前的 Hooks
  // 此时，我们处于“偏移”时刻。
  // 我们需要把当前链表节点“挪动”到一边，创建一个新的节点来接收当前状态。

  // 获取当前节点的状态（这就是我们之前计算出来的 state）
  let currentState = hookNode.state;

  // 创建一个新的 Hook 节点
  // 关键点：next 指向旧的节点，实现“链式”保留
  let nextHook = new HookNode(currentState, null, hookNode);

  // 更新 Fiber 的 memoizedState 指针
  // 指向这个新节点
  currentFiber.memoizedState = nextHook;

  return currentState;
}

/**
 * useEffect 的实现
 * 它会创建一个节点，并把旧的 memoizedState（即上一次渲染的链表）保存在这个节点的 memoizedState 字段里
 */
function useEffect(create, deps) {
  // 获取当前 memoizedState 指针（也就是上一次渲染时的最后一个 Hook 节点）
  // 比如，上一次渲染完了，memoizedState 指向了 useEffect 节点。
  // 这里我们取出来，作为新节点的“旧状态”保存。
  const prevHook = currentFiber.memoizedState;

  // 创建新的 Effect 节点
  const effectHook = {
    create: create,
    deps: deps,
    // 关键！保存当前的 memoizedState（上一次渲染的链表）
    memoizedState: prevHook,
    next: null
  };

  // 更新 Fiber 的 memoizedState 指针
  // 现在指针指向了新创建的 Effect
  currentFiber.memoizedState = effectHook;

  // 将 effectHook 加入 effects 数组，以便在提交阶段执行
  currentFiber.effects.push(effectHook);
}

/**
 * 提交阶段：执行 Effect
 */
function commitEffects() {
  console.log("--- 进入提交阶段，开始执行 Effects ---");

  // 遍历当前 Fiber 节点保存的 effects 数组
  for (let i = 0; i < currentFiber.effects.length; i++) {
    const effect = currentFiber.effects[i];

    console.log(`正在执行 Effect 节点 ${i}...`);

    // 运行当前 Effect
    if (effect.create) {
      effect.create();
    }

    // 核心逻辑：如果依赖项变了，我们需要运行“上一个” Effect 的清理函数
    // 如何找到“上一个”？通过 effect.memoizedState
    // effect.memoizedState 就是上一次渲染时的 memoizedState 指针
    const prevEffect = effect.memoizedState;

    if (prevEffect) {
      console.log("检测到依赖变化，正在运行上一个 Effect 的清理函数...");
      // prevEffect 是上一次渲染时最后一个 Effect 节点
      // 它也有一个 memoizedState，指向再上一次...
      // 我们通过递归或者循环来找到第一个 useState 的节点？
      // 实际上，React 18 的逻辑更复杂，它通常通过遍历链表找到匹配的 deps。
      // 这里为了演示，我们假设 prevEffect 就是那个需要清理的对象。
      if (prevEffect.create) {
        console.log("运行 cleanup...");
        prevEffect.create(); // 这里的 create 实际上应该是 cleanup 逻辑
      }
    }
  }
  console.log("--- 提交阶段结束 ---n");
}

// ==========================================
// 模拟场景
// ==========================================

console.log(">>> 开始第一次渲染 <Counter />");
const fiber1 = new FiberNode();
initRender(fiber1);

// 组件内调用
const count = useState(0);
console.log("当前 count:", count);

useEffect(() => {
  console.log("第一次渲染完成，Effect1 执行");
}, []);

console.log(">>> 第一次渲染结束，开始提交");
commitEffects();

console.log("n>>> 触发更新：setCount(1) -> 开始第二次渲染");
// 重新初始化 Fiber，模拟新的一次渲染周期
const fiber2 = new FiberNode();
initRender(fiber2);

const count2 = useState(1); // 这里会触发链表偏移
console.log("当前 count:", count2);

// 这次我们添加第二个 useEffect
useEffect(() => {
  console.log("第二次渲染完成，Effect2 执行");
}, []);

useEffect(() => {
  console.log("第二次渲染完成，Effect3 执行 (依赖不变)");
}, [count2]); // 假设 deps 匹配

console.log(">>> 第二次渲染结束，开始提交");
commitEffects();

代码运行分析：

当你运行这段代码时，你会发现一个非常有趣的现象：commitEffects 函数不仅执行了当前的 Effect，还执行了之前的 Effect。

为什么？
因为我们在创建 effectHook 时，把 prevHook（上一次渲染的最后一个 Hook）保存到了 effectHook.memoizedState 中。

在 commitEffects 里，当我们遍历到当前的 Effect 时，通过 effect.memoizedState 找到了上一次的 Effect。

这就是线性偏移算法在物理内存中的体现：空间换时间。我们在新的节点中，预留了一个指针槽位，指向旧的内存区域。通过这一步简单的指针赋值，我们就在新的渲染周期里，完整保留了旧渲染周期的状态快照。

---

第七部分：为什么不能是数组？

你可能会问：“既然是链表，为什么不用数组 Array？”

因为在 JavaScript 里，数组是可变的。如果你用一个数组存状态，每次渲染都要 push 一个新元素，还要清空旧数组。这很麻烦。

链表是原生对象，每个节点都是独立的。而且，React 的 Hooks 设计允许你在同一个组件中混用 useState 和 useEffect，甚至 useMemo 和 useCallback。它们在物理上可能都是 memoizedState 链表的一部分，只是语义和用途不同。

useState 节点里存的是 queue，用来处理状态更新。
useEffect 节点里存的是 deps，用来处理副作用。

但它们都共享同一个链表结构。这种统一的数据结构让 React 内部处理逻辑变得非常通用。当你写 useState 时，你在操作链表；当你写 useEffect 时，你依然在操作同一个链表。

---

第八部分：指针的尽头与性能

现在，让我们谈谈性能。

当组件重渲染成千上万次，或者组件树非常深时，这些 memoizedState 指针就会像多米诺骨牌一样，一级一级地传导下去。

每次渲染，所有的 Hook 节点都会在堆内存中被创建。虽然 JS 引擎有垃圾回收机制（GC），但在高频渲染下，这种“创建新链表 -> 老链表暂时不回收 -> 等待下一帧再创建新链表”的过程，会导致内存压力。

这也是为什么 React 官方不建议在循环或条件语句中调用 Hooks 的原因。如果你在 if (flag) 里调用了 useState，那么下一次渲染时，React 的计数器可能会和组件里的 if 条件对不上，导致指针错位，或者丢失状态。

React 的“线性偏移”算法极其依赖于 Hooks 调用顺序的严格一致性。因为只有顺序一致，指针的偏移才能精准地指向它该去的地方。

---

第九部分：总结（不，还没结束）

我们要讲的不仅仅是链表，更是状态的连续性。

在 React 外部看来，状态是恒定的。count 总是 1，然后变成 2。
但在 React 内部看来，状态是瞬时的。每次渲染，count 都是一个全新的值，存放在一个全新的节点里。

memoizedState 指针的偏移，就像是给这个瞬时的值打了一个记号，告诉它：“嘿，记得回头看看你的老朋友，你的上一个状态还在后面排队呢。”

这种算法的精妙之处在于它零依赖。它不需要在组件实例中保存引用，不需要闭包陷阱（虽然闭包也有关联，但主要靠的是链表结构）。它完全依赖于函数的执行顺序。

所以，下次当你写 React Hooks 时，请记住：
你写的不是一行代码，你是在内存里画线。
useState 是在画一条路，指向未来。
useEffect 是在画一个锚，锚定过去。
而 memoizedState 是那个拿着指南针的领航员，他在新旧世界之间穿梭，确保你的数据不会在重渲染的洪流中丢失。

这就是 React Hooks 在物理层上的秘密。它不魔法，它是数学。它是链表的胜利。