React 最核心 3 大底层原理：Fiber + Diff + 事件系统

React 三大核心原理（面试 90% 必问）

我给你整理成最精简、最好记、直接能背的版本，不用懂源码也能拿满分。

一、Fiber 架构（最重要）

1. 是什么

React 16+ 新的虚拟DOM架构，把虚拟DOM变成链表结构，可以中断、恢复、优先级调度。

2. 解决什么问题

老版本递归渲染一旦开始不能停，超过16ms就卡顿、掉帧。
Fiber 把大任务拆成小片，不阻塞主线程。

3. 两个阶段（必背）

1. Render 阶段（可中断）
   diff 对比、计算变化
   可暂停、可恢复、可放弃

2. Commit 阶段（不可中断）
   一次性更新DOM
   保证DOM稳定不闪烁

4. 一句话总结

Fiber = 可中断的渲染引擎 = React 并发底层支撑

二、Diff 算法

1. 是什么

对比新旧虚拟DOM，找到最小变化，只更新必要DOM。

2. 三大规则（必背）

1. 只同层比较，不跨层
2. 不同类型 → 删除重建
3. 同类型、有key → 复用节点

3. React 18 Diff 特点

• 双指针遍历
• 不计算最优移动
• 简单、稳定、够用

4. 一句话总结

Diff = 找DOM变化 → 最小量更新

三、React 18 事件系统（合成事件）

1. 是什么

React 不直接用原生事件，自己封装了合成事件（SyntheticEvent）。

2. 为什么要做

• 跨浏览器兼容
• 批量更新
• 性能更好（事件委托到根节点）
• 支持并发渲染

3. 重要特点

• 所有事件都绑在 root 上
• 不是原生事件，但用法一样
• 事件是批量执行的

4. 一句话总结

合成事件 = React 自己包装的事件 → 高性能、全兼容、支持并发

🔥 终极三合一 背诵版（面试直接说）

1. Fiber：可中断的渲染架构，拆大任务、不卡顿，是并发基础。
2. Diff：同层对比虚拟DOM，找最小变化，高效更新DOM。
3. 合成事件：React封装事件，委托根节点，兼容+高性能。