概念

React 用 JS 对象来模拟 DOM 节点，然后将其渲染成真实的 DOM 节点。

用 JSX 语法写出来的 div 其实就是一个虚拟节点：

<div id="x">
  <span class="red">hi</span>
</div>

上述代码会得到这样一个对象：

{
  tag: 'div',
  props: { id: 'x' },
  children: [
    {
      tag: 'span',
      props: { className: 'red' },
      children: [ 'hi' ],
    }
  ]
}

如果节点发生变化，并不会直接把新虚拟节点渲染到真实节点，而是先经过 diff 算法得到一个 patch 再更新到真实节点上。

优点

DOM 操作性能问题。通过虚拟 DOM 和 diff 算法减少不必要的 DOM 操作，保证性能不太差。(将多个 DOM 操作合并、未发生变化的 DOM 节点不重新渲染)
为 React 带来了跨平台能力，因为虚拟节点除了渲染为真实节点，还可以渲染为其他东西。

深入理解react中的虚拟DOM、diff算法
文章结构： React中的虚拟DOM是什么？虚拟DOM的简单实现（diff算法）虚拟DOM的内部工作原理 Re...
理解虚拟 DOM ，React 选择它是为了性能吗？
虚拟 DOM 是什么虚拟 DOM 是 JS 对象虚拟 DOM 是对真是 DOM 的描述虚拟 DOM 的本质是...
vue里的虚拟DOM
首先来说说虚拟DOM的原理：虚拟 DOM 的实现原理主要包括以下 3 部分： 1）用 JavaScript 对象模...
手写 Vue Router、手写响应式实现、虚拟 DOM 和 D
Virtual DOM 的实现原理了解什么是虚拟DOM，以及虚拟DOM的作用 Snabbdom的基本使用 Sna...
Vue虚拟Dom与diff算法原理
什么是虚拟DOM？真实的元素节点：为什么使用虚拟DOM？虚拟DOM的作用是什么？虚拟DOM和真实DOM的区...
虚拟 DOM 的原理是什么？
概念 React 用 JS 对象来模拟 DOM 节点，然后将其渲染成真实的 DOM 节点。用 JSX 语法写出来...
虚拟DOM（Virtual DOM）的工作原理？
虚拟DOM（Virtual DOM）的工作原理？ 1. 为什么需要虚拟DOM？先介绍浏览器加载一个网页需要经历那...
vue 2x源码分析（三）---虚拟dom
以前用jq，我们都是直接操作dom，为什么要使用虚拟dom，虚拟dom的优势是什么，虚拟dom是如何实现的，vue...
虚拟dom原理
声明：本文copy自深度剖析：如何实现一个 Virtual DOM 算法-戴嘉华，留做记录已做日后温习目录： 1...
vue面试中需要掌握的知识点：
面试题 1. vue数据驱动，讲一下vue实现原理。 2. 讲一下什么是虚拟DOM，虚拟DOM实现原理。 3. 数...