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树
}
