当前位置：首页 > news >正文

Vue React

news 来源：原创 2025/6/3 19:15:26

Vue 的源码主要分为以下几个部分：

主要涉及 响应式、虚拟 DOM、组件系统、编译器、运行时。

├── packages/
│   ├── compiler-core/    # 编译器核心
│   ├── compiler-sfc/     # 处理 .vue 单文件组件
│   ├── compiler-dom/     # 处理 DOM 相关的编译逻辑
│   ├── reactivity/       # 响应式系统
│   ├── runtime-core/     # 运行时核心
│   ├── runtime-dom/      # 运行时 DOM 相关
│   ├── shared/           # 共享工具函数
│   ├── vue/              # Vue 入口
│   └── ...

React 源码结构:

整体架构可以分为 调度（Scheduler）、协调（Reconciler）、渲染（Renderer） 三个核心部分

可以从 React 入口、Fiber 架构、调度机制、Hooks 实现、Diff 算法 等方面解析其核心原理。

├── packages/
│   ├── react/            # React 核心 API（React.createElement、hooks）
│   ├── react-dom/        # 负责渲染到 DOM
│   ├── scheduler/        # 调度器，控制任务优先级
│   ├── react-reconciler/ # 负责 Fiber 树的协调和 Diff
│   ├── shared/           # 公共方法
│   ├── jest/             # 测试相关
│   └── ...

Fiber 是 React 16 引入的核心数据结构，每个组件对应一个 Fiber 节点：

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // 实例相关
  this.tag = tag;           // 组件类型(Function/Class/Host等)
  this.key = key;           // key属性
  this.elementType = null;  // 创建元素的类型
  this.type = null;         // 组件函数/类
  this.stateNode = null;    // 对应的真实DOM实例/类组件实例

  // Fiber树结构
  this.return = null;       // 父Fiber
  this.child = null;        // 第一个子Fiber
  this.sibling = null;      // 兄弟Fiber
  this.index = 0;           // 在兄弟中的索引

  // 状态相关
  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;  // 状态更新队列
  this.memoizedState = null;// 当前状态

  // 副作用
  this.effectTag = NoEffect;
  this.nextEffect = null;   // 下一个有副作用的Fiber

  // 双缓存技术
  this.alternate = null;    // 连接current和workInProgress树
}