React 算法原理剖析：栈操作在 React 中的应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01176/article/details/148443146

React 算法原理剖析：栈操作在 React 中的应用

react-illustration-series 图解react源码, 用大量配图的方式, 致力于将react原理表述清楚. 项目地址: https://gitcode.com/gh_mirrors/re/react-illustration-series

前言

在 React 源码中，栈（Stack）这种基础数据结构被巧妙地运用在多个核心机制中。本文将深入剖析栈的概念、特性以及在 React 中的具体应用场景，帮助读者理解这一重要数据结构在 React 内部的工作原理。

栈的基本概念

栈是一种遵循**后进先出（LIFO）**原则的线性数据结构，只允许在一端（称为栈顶）进行插入（push）和删除（pop）操作。它具有以下核心特性：

先入后出，后入先出
除头尾节点外，每个元素有一个前驱和一个后继

栈的基本操作实现

class Stack {
  constructor() {
    this.dataStore = [];  // 存储栈元素
    this.top = 0;         // 栈顶指针
  }

  // 压栈操作
  push(element) {
    this.dataStore[this.top++] = element;
  }

  // 弹栈操作
  pop() {
    return this.dataStore[--this.top];
  }

  // 查看栈顶元素
  peek() {
    return this.dataStore[this.top - 1];
  }

  // 获取栈长度
  length() {
    return this.top;
  }

  // 清空栈
  clear() {
    this.top = 0;
  }
}

React 中的栈应用场景

1. Context 状态管理

在 React 的 Fiber 架构中，Context API 的实现巧妙地利用了栈结构来管理 Provider 的状态变化。当组件树中存在多层嵌套的 Context.Provider 时，React 通过栈来维护上下文值的层级关系。

核心实现机制

React 内部维护了一个全局栈结构来存储 Context 值：

// 全局栈存储
const valueStack: Array<any> = [];
let index = -1;  // 栈指针

// 创建栈游标
function createCursor<T>(defaultValue: T): StackCursor<T> {
  return { current: defaultValue };
}

// 入栈操作
function push<T>(cursor: StackCursor<T>, value: T, fiber: Fiber): void {
  index++;
  valueStack[index] = cursor.current;  // 保存当前值
  cursor.current = value;              // 更新为新值
}

// 出栈操作
function pop<T>(cursor: StackCursor<T>, fiber: Fiber): void {
  cursor.current = valueStack[index];  // 恢复之前的值
  valueStack[index] = null;           // 清理
  index--;
}

工作流程示例

考虑以下嵌套 Provider 结构：

<MyContext.Provider value={1}>
  <MyContext.Provider value={2}>
    <MyContext.Provider value={3}>
      {/* 子组件 */}
    </MyContext.Provider>
  </MyContext.Provider>
</MyContext.Provider>

在 Fiber 树的构建过程中：

beginWork 阶段：遇到每个 Provider 时执行 push 操作，将当前值压入栈中
completeWork 阶段：完成每个 Provider 时执行 pop 操作，从栈中恢复之前的值

这种机制确保了嵌套 Context 的正确层级关系维护。

2. 执行上下文管理

React 使用 executionContext 这个位掩码变量来跟踪当前的执行上下文状态。虽然这不是传统意义上的栈结构，但它巧妙地利用了 JavaScript 的函数调用栈来实现类似的效果。

实现原理

let executionContext = NoContext;

function batchedUpdates(fn) {
  const prevExecutionContext = executionContext;
  executionContext |= BatchedContext;
  try {
    return fn();
  } finally {
    executionContext = prevExecutionContext;
  }
}

这种模式的特点：