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

react 15-16-17-18各版本的核心区别、底层原理及演进逻辑的深度解析

article 2025/4/1 9:35:57

一、React 15（2016）

核心架构：Stack Reconciler（栈协调器）
工作原理：
- 同步递归渲染：采用深度优先遍历方式递归处理 Virtual DOM，形成不可中断的调用栈
- 渲染流程：1. 触发 setState → 2. 生成新 Virtual DOM → 3. Diff 算法对比差异 → 4. 同步更新真实 DOM
局限性：
- 阻塞主线程：大型组件树更新会导致界面卡顿（超过 16ms 的帧时间）
- 无法实现优先级调度：所有更新同等对待，紧急交互无法插队
- 错误处理薄弱：组件树中任意错误会导致整个应用崩溃
扩展：
- 优先等级
  - 同步执行，如输入框的输入事件
  - 需要快速响应的事件（点击，悬停）
  - 普通状态更新（setState）
  - 数据预加载，非紧急渲染
  - 可延迟到浏览器空闲时间段的任务
- 调度的原理
  - 时间切片
    - 将长任务拆分成多个5ms左右的小单元任务，通过reauestIdleCallback或者 schdeuler在浏览器空闲时间执行
  - 可中断与恢复
    - Fiber 架构允许保存当前的任务状态，高优先级任务可中断当前低优先级任务，优先执行后自动回复
- 优先级标记方式
  - 手动标记：通过API明确优先级，startTransition
  - 自动推算： react 会根据事件类型进行推算 onClick，onMouseMove，onLoad等等
- Virtual DOM 的本质与作用
  - 什么是Virtual DOM
    - 定义：一个轻量化的js 对象，描述真实的DOM的结构和属性
    - 结构示例：
```
const vdom = {
  type: 'div',
  props: {
    className: 'container',
    children: [
      { type: 'h1', props: { children: 'Hello World' } },
      { type: 'p', props: { children: 'Content...' } }
    ]
  }
};
```
  - 核心作用
    - 性能优化：通过 Diff 算法计算新旧 Virtual DOM 差异，最小化真实 DOM 操作
    - 跨平台能力：Virtual DOM 抽象了平台差异，同一逻辑可渲染到 Web、Native（React Native）、Canvas 等
  - diff算法策略
    - 同级比较：仅对比同层级的节点，不跨层级比较（时间复杂度从 O(n³) 优化到 O(n)）。
    - Key值优化：列表通过key值，减少不必要的节点销毁/重建
    - 组件类型判断：如果组件类型不同，直接替换整个子树
- Virtual DOM 与协调器的协作流程
  - 触发更新：组件变化将触发协调器流程
  - 构建Fiber树：协调器将vmdom 转为fiber节点链表，每个节点包含优先级标记
  - 协调调度：根据
  - 提交阶段：完成所有fiber节点处理后，将变更批量提交到真实的dom