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

Posted 许拖拖和李早早的技术交流中心

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

以上是关于React Virtual DOM是什么?请开始你的解释的主要内容,如果未能解决你的问题,请参考以下文章

[react] 你知道Virtual DOM的工作原理吗?

引擎盖下的 React Virtual Dom

如何理解vue,virtual DOM

Vue.js 2.0更新之增加Virtual DOM讲解

Virtual DOM(虚拟 DOM)

Virtual DOM 算法