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 节点:

javascript 复制代码
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树
}
相关推荐
GISer_Jing8 分钟前
React-Markdown详解
前端·react.js·前端框架
太阳花ˉ9 分钟前
React(九)React Hooks
前端·react.js
朴拙数科44 分钟前
技术长期主义:用本分思维重构JavaScript逆向知识体系(一)Babel、AST、ES6+、ES5、浏览器环境、Node.js环境的关系和处理流程
javascript·重构·es6
拉不动的猪1 小时前
vue与react的简单问答
前端·javascript·面试
污斑兔2 小时前
如何在CSS中创建从左上角到右下角的渐变边框
前端
星空寻流年2 小时前
css之定位学习
前端·css·学习
旭久2 小时前
react+antd封装一个可回车自定义option的select并且与某些内容相互禁用
前端·javascript·react.js
是纽扣也是烤奶2 小时前
关于React Redux
前端
阿丽塔~2 小时前
React 函数组件间怎么进行通信?
前端·javascript·react.js