【 React 】虚拟DOM - 也没那么复杂

了解一个名词，首先得了解它产生的背景～

1、虚拟DOM的背景

最早由开发者 Jordan Walke 在 2010 年提出，应用在React框架中。（这个概念提出居然有14年了～）

当时解决什么问题？

Web 应用开发中普遍存在的性能问题

就像：频繁操作DOM --> 导致页面重绘 --> 页面卡顿

背景基本Get, 那什么是虚拟DOM？

2、什么是虚拟DOM？

上简单案例：

javaScript 复制代码

<div id="app">
  <p class="text">hello world!!!</p>
</div>

上面的HTML转换成虚拟DOM如下：

javaScript 复制代码

const virtualDOM = {
  tag: 'div',
  props: {
    id: 'app'
  },
  children: [
    {
      tag: 'p',
      props: {
        className: 'text'
      },
      children: [
        'hello world!!!'
      ]
    }
  ]
}

从案例可知, 虚拟DOM：

包含了 tag、props、children 三个属性
是个对象
是对真实DOM的一种抽象表示

背景，概念结构基本已清晰，接着了解它是如何工作的？

3、虚拟 DOM 的工作原理

上简单案例：

假设我们有以下两个虚拟 DOM 树：

首先：从图比对发现className 属性发生了变化，从 'text' 变为 'updated-text'。

其次：根据这个变化，生成一个 DOM 操作指令，更新className。

接着：将这个 DOM 操作指令应用到真实的 DOM 上，以更新页面的显示。

最后：用简单的话概括虚拟 DOM 的工作流程也就是

构建虚拟 DOM 树
比较新旧树找差异
生成 DOM 操作指令
将指令应用到真实DOM上

工作原理基本大致了解，接着再往深挖一层

上面我们是通过眼睛观察到className 属性发生了变化，那机器是基于什么原则来观察这个变化？

也就是新旧树找出差异是如何比较的？

4、闪亮登场 diff（差异比较）算法

都说diff算法复杂，可是复杂不是由简单构成的么，那就先认识一个最简单的 diff 算法示例也可～

上简单案例：

一个简单的 diff 函数比较：

javaScript 复制代码

// 比较两个节点是否相同
function diff(oldNode, newNode) {
  if (!oldNode || !newNode) {
    // 如果有一个节点不存在，则返回替换节点的指令
    return { type: 'replace', newNode };
  }
  
  if (oldNode.tag !== newNode.tag) {
    // 如果两个节点的标签名不同，则返回替换节点的指令
    return { type: 'replace', newNode };
  }

  return null; // 节点相同，返回空指令
}

// 测试 diff 算法
const oldNode = new Node('div', { id: 'app' }, []);
const newNode = new Node('div', { id: 'app' }, []);
const patches = diff(oldNode, newNode);

console.log(patches); // 输出：null

javaScript 复制代码

// 定义节点的数据结构
class Node {
  constructor(tag, props, children) {
    this.tag = tag; // 标签名
    this.props = props; // 属性对象
    this.children = children; // 子节点数组
  }
}

在上面这个简单的示例中，定义了一个 diff 函数，它接受两个节点作为参数。

并比较它们的标签名是否相同。如果标签名不同，则返回一个表示替换节点的指令。

如果标签名相同，则返回空指令表示节点相同。

而在我们平时框架中的diff算法：

通常会结合深度优先搜索、优化策略、最小化更新技术；
这三个概念在 diff 算法中起着重要作用，帮助实现虚拟 DOM 的快速更新和渲染
简言之：水有点深，改日再挖～

以上就是对虚拟DOM产生背景、概念、工作原理的分层概述～

最后总结虚拟DOM的优点。

5、优点表彰

1）性能提升：

在内存中进行 DOM 结构的比较和计算 -> 提高页面渲染性能。

2）更好的跨平台兼容性：

也就是一次编写多端运行的能力。

可以在浏览器端使用 React 渲染虚拟 DOM，也可以在服务器端使用 Node.js 渲染相同的虚拟 DOM。

不需要修改虚拟 DOM 的结构或代码。