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; // 父Fiberthis.child = null; // 第一个子Fiberthis.sibling = null; // 兄弟Fiberthis.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树
}
)
