认识react虚拟Dom

前端技术的快速发展，让现在的vue、react成为主流框架

一开始的静态页面，到后来的jquery，到现在的vue、react，mvvm、mvc前端开发模式都使用了虚拟dom
但纵观主流框架好像也是对虚拟dom 的各种造作和改进
为什么要使用虚拟dom呢?

首先我们了解下什么是虚拟dom

1. 虚拟 DOM 是 JS 对象
2. 虚拟 DOM 是对真实 DOM 的描述

<h1 className="greeting">Hello, world! </h1>

这个标签在react会展示为如下类型：

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

React 中的虚拟 DOM 大致是如何工作的。虚拟 DOM 在 React 组件的挂载阶段和更新阶段工作流程如下：

• 挂载阶段，React 将结合 JSX 的描述，构建出虚拟 DOM 树，然后通过 ReactDOM.render 将dom树转换为真实的dom,挂载到页面上；

• 更新阶段，页面在作用于真实 DOM 之前，会先作用于虚拟 DOM，虚拟 DOM 将在 JS 层借助diff算法先对比出具体有哪些真实 DOM 需要被改变，然后再将这些改变作用于真实 DOM,进行更新渲染。

虚拟DOM保留了真实DOM节点的一些基本属性，和节点之间的层次关系，把它们放在一个对象中，它相当于在javascript和DOM之间的一层“缓存”

虚拟DOM是如何解决问题的

React 使用了 JSX，一种使用体验和模板相似的 JS 语法糖。

JSX 是 JavaScript 的一种语法扩展，它和模板语言很接近，但是它充分具备 JavaScript 的能力。

实际上浏览器并没有解析jsx的能力

这里Babel将jsx转换为具有JavaScript的能力，Bable将jsx代码转换为大部分低版本浏览器也能够识别的 ES5 代码

区别就在于多出了一层虚拟 DOM 作为缓冲层。这个缓冲层带来的利好是：当 DOM 操作（渲染更新）比较频繁时，它会先将前后两次的虚拟 DOM 树进行对比，定位出具体需要更新的部分，生成一个“补丁集”，最后只把“补丁”打在需要更新的那部分真实 DOM 上，实现精准的“差量更新”。这个过程对应的虚拟 DOM 工作流如下图所示：

这里对diff算法没有做太多的解释，想了解的可以看看源码

React 选用虚拟 DOM，真的是为了更好的性能吗？

关于这个问题，可以看看大佬的回答(https://www.zhihu.com/question/31809713)

其实虚拟dom的好处是“使得前端开发能够基于函数式 UI 的编程方式实现高效的声明式编程”
虚拟 dom 的存在，不能片面的去说它解决了真实 dom 更新视图带来的性能问题，是提升视图渲染性能存在的。虚拟 dom 是让 diff 算法提供了可能。并且为编译多平台代码提供了可能，我们可以在虚拟 dom 转化为真实节点这一步，做跨平台的文章。还有一点便是提升开发体验和提高开发效率，让 ui=fn（state）这样数据驱动视图的函数式、声明式编程变为可能，JSX 便是其中一个品类。

码字不易，请大佬指教！