vlambda博客
学习文章列表

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

网页页面是由不同的元素组成,比如一个标题,一个段落,一个表格等等,每个元素都是一个节点,这样的节点形成一个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