一、React 15(2016)
-
核心架构:Stack Reconciler(栈协调器)
-
工作原理:
同步递归渲染
:采用深度优先遍历方式递归处理 Virtual DOM,
形成不可中断的调用栈
渲染流程
:1. 触发 setState → 2. 生成新 Virtual DOM → 3. Diff 算法对比差异 → 4. 同步更新真实 DOM
-
局限性:
-
阻塞主线程:大型组件树更新会
导致界面卡顿
(超过 16ms 的帧时间
) -
无法实现优先级调度
:所有更新同等对待,紧急交互无法插队
-
错误处理薄弱:组件树中任意
错误会导致整个应用崩溃
-
-
扩展:
-
优先等级
-同步执行
,如输入框的输入事件
-需要快速响应的事件
(点击,悬停)
-普通状态更新
(setState)
-数据预加载,非紧急渲染
-可延迟到浏览器空闲时间段的任务
-
调度的原理
- 时间切片
- 将长任务拆分成多个5ms左右的小单元任务,通过r
eauestIdleCallback或者 schdeuler
在浏览器空闲时间执行
- 将长任务拆分成多个5ms左右的小单元任务,通过r
- 可中断与恢复
- 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
-
Virtual DOM 与协调器的协作流程
- 触发更新:组件变化将触发协调器流程
- 构建Fiber树: 协调器将vmdom 转为fiber节点链表,每个节点包含优先级标记
- 协调调度:根据
- 提交阶段:完成所有fiber节点处理后,将变更批量提交到真实的dom
-
react15的特性先到这里,react16-17-18 在下一篇文章详细讲解,敬请期待吧~