React Virtual DOM是什么？请开始你的解释

Posted 2021-03-30 许拖拖和李早早的技术交流中心

网页页面是由不同的元素组成，比如一个标题，一个段落，一个表格等等，每个元素都是一个节点，这样的节点形成一个DOM树的结构（Document Object Model）。所以DOM树上的节点被称为元素，而Virtual DOM上的节点是完全不同的抽象，叫做Component（组件）。Virtual DOM是一个模仿真实DOM的javascript 对象。

React用Virtual DOM 来渲染UI。如何做到的呢？当组件（是Virtual DOM上的组件）的状态（state）发生改变时，一个神奇的diff算法会计算出最少的步骤更新到浏览器所显示的网页页面上，diff算法寻找到需要变更的虚拟DOM节点（Component），然后把这个修改更新到浏览器的网页页面真实DOM节点（element 元素）上，所以标题变了内容变了页面变（美？）了。

简单的去看，Virtual DOM是一个纯粹的JS数据结构，装备上diff算法，每每要更新网页的时候，虚拟DOM快快的定位要修改的组件实现渲染，这比过去遍历网页上的所有节点来画图会快很多很多。

关于React的diff算法要写的太长，下次写。

2021.01.13