页面：虚拟DOM

视频链接

DOM 的缺陷

• 整个渲染流水线
• 可能引发强制同步布局和布局抖动

虚拟 DOM

解决的问题

• 将页面改变的内容应用到虚拟 DOM 上，而不是直接应用到 DOM 上
• 变化被应用到虚拟 DOM 上时，虚拟 DOM 并不急着去渲染页面，而仅仅是调整虚拟 DOM 的内部状态，这样操作虚拟 DOM 的代价就变得非常轻了
• 在虚拟 DOM 收集到足够的改变时，再把这些变化一次性应用到真实的 DOM 上

运行方式

1. 创建阶段
   1. 依据 JSX 和基础数据创建出来虚拟 DOM
   2. 由虚拟 DOM 树创建出真实 DOM 树
   3. 触发渲染流水线往屏幕输出页面
2. 更新阶段
   1. 根据新的数据创建一个新的虚拟 DOM
   2. 比较两个树，找出变化的地方，并把变化的地方一次性更新到真实的 DOM 树上

React Fiber 更新机制 （原理介绍）

3. 染引擎更新渲染流水线，并生成新的页面

双缓存

减少一些不必要的更新

保证 DOM 的稳定输出

MVC 模式

React 视图

action/reducer 控制器

Store/state 模型