vnode到renderDom 漫谈

2023-10-21 02:56:07

vnode与renderDom

在前端开发中，虚拟DOM(Virtual DOM)是一种编程概念，它允许您在不直接操作真实DOM的情况下构建和更新用户界面。虚拟DOM是一个轻量级的对象，它表示真实DOM的当前状态。当您对虚拟DOM进行更改时，它会计算出更改内容并将其应用于真实DOM。这可以减少对真实DOM的操作次数，从而提高应用程序的性能。

在大多数前端框架中，虚拟DOM通常由一个称为“vnode”的对象来表示。vnode是虚拟DOM节点的简称，它包含有关DOM节点的所有必要信息，包括其类型、属性和子节点。当您在前端框架中创建或更新组件时，框架会创建一个新的vnode并将其与组件的状态进行比较。如果vnode与之前存储的vnode不同，框架就会计算出更改内容并将其应用于真实DOM。

diff算法

diff算法是虚拟DOM的核心算法之一。它的作用是计算出vnode与之前存储的vnode之间的差异。diff算法通常使用深度优先搜索(DFS)或广度优先搜索(BFS)等算法来遍历vnode树，并逐层比较每个vnode的属性和子节点。当diff算法发现vnode与之前存储的vnode不同时，它就会生成一个“补丁”。补丁是一个指令列表，它告诉框架如何将vnode的更改应用于真实DOM。

renderDom

renderDom是将虚拟DOM渲染到真实DOM的过程。renderDom通常由前端框架的渲染引擎来完成。渲染引擎会根据vnode的类型、属性和子节点创建相应的DOM元素并将其插入到真实DOM中。当renderDom完成之后，虚拟DOM中的所有更改就会反映在真实DOM中。

虚拟DOM的优缺点

使用虚拟DOM可以带来以下优点：

提高性能：虚拟DOM可以减少对真实DOM的操作次数，从而提高应用程序的性能。
提高代码的可维护性：虚拟DOM可以使代码更易于理解和维护，因为您可以直接在虚拟DOM中更新UI，而无需直接操作真实DOM。
跨平台开发：虚拟DOM可以帮助您在不同的平台上开发应用程序，因为您可以使用相同的虚拟DOM API来操作不同的真实DOM实现。

但是，使用虚拟DOM也有一些缺点：

学习曲线陡峭：虚拟DOM是一个相对较新的概念，因此您可能需要花费一些时间来学习它。
性能开销：虚拟DOM本身会带来一些性能开销，因为您需要在每次更新UI时重新创建和比较vnode。

不同前端框架对vnode和renderDom的不同实现

不同的前端框架对vnode和renderDom有不同的实现。以下是几种常见前端框架对vnode和renderDom的实现：

React：React使用一种名为“Fiber”的渲染引擎来渲染虚拟DOM。Fiber引擎使用深度优先搜索算法来遍历vnode树，并逐层比较每个vnode的属性和子节点。当Fiber引擎发现vnode与之前存储的vnode不同时，它就会生成一个“补丁”。补丁是一个指令列表，它告诉Fiber引擎如何将vnode的更改应用于真实DOM。
Vue：Vue使用一种名为“Watcher”的机制来跟踪数据的变化。当数据发生变化时，Watcher就会触发虚拟DOM的更新。虚拟DOM的更新过程与React类似，也使用深度优先搜索算法来遍历vnode树，并逐层比较每个vnode的属性和子节点。当虚拟DOM更新完成后，Vue就会将vnode的更改渲染到真实DOM中。
Angular：Angular使用一种名为“Zone.js”的库来跟踪数据的变化。当数据发生变化时，Zone.js就会触发虚拟DOM的更新。虚拟DOM的更新过程与React和Vue类似，也使用深度优先搜索算法来遍历vnode树，并逐层比较每个vnode的属性和子节点。当虚拟DOM更新完成后，Angular就会将vnode的更改渲染到真实DOM中。