Vue React

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