React深入原理如何才能彻底掌握？

本文共计1416个文字，预计阅读时间需要6分钟。

目录 + VDOM（虚拟DOM）+ Fiber架构 + 初始化渲染 + 更新时 + render阶段 + commit阶段 + VDOM（虚拟DOM） + React和Vue都是基于VDOM的前端框架。 + Web界面由DOM树构建，当其中一部分发生变更时，实际上是对应的变更操作。

目录

• VDOM（虚拟dom）
• Fiber架构
• 初始化渲染
• 更新时
• render阶段
• commit阶段

VDOM（虚拟dom）

react和vue都是基于vdom的前端框架。

web界面由DOM树来构建，当其中一部分发生变化时，其实就是对应的某个节点发生了变化。

若一次操作中有十次更新DOM的动作，虚拟DOM不会立即操作DOM，而是将这十次更新的diff内容保存到本地的一个js对象中，最终将这个js对象一次性attach到DOM树上，再进行后续的操作。

用js对象模拟DOM节点的好处是：

• 页面的更新可以先全部反映在js对象（虚拟DOM）上，精准的对比关心的属性，避免大量无谓的计算。等更新完成后，再将最终的js对象映射成真是的DOM，交由浏览器去绘制。
• 为应用带来的跨平台的能力，不再仅仅局限于浏览器端。比如：React-Native、canvas等。