React Virtual DOM (虚拟Dom)

定义

官方文档：
Virtual DOM是一种编程理念，将UI虚拟的保存在内存中，并且通过某些库渲染成真实的DOM

精简抽象回答：
1. Virtual DOM是一种编程理念
2. Virtual DOM将UI节点抽象成JS对象

UI节点抽象指的是Virtual DOM对html DOM的抽象
在React开发中，我们很少或者是几乎不会去调用DOM Api
也是因为抽象，所以React也可以开发Native(React Native)

Virtual DOM 和原生DOM之间的差别

原生DOM更新

DOM Api 调用更新UI

Virtual DOM 更新

- 每次render都会产生一份新的'react dom'
- Virtual DOM 要对新旧'react dom'进行比较，从而确定在旧'react dom'的基础上进行多少变更
- 确定最优的变更策略之后调用DOM更新UI

Virtual DOM 渲染成HTML，在流程上会比原生DOM操作多几个步骤，但他总体上比原生DOM更加高效，特别是在复杂页面上会更明显，而在简单页面上，原生DOM则会比Virtual DOM要快

Virtual DOM 数据结构

在Virtual DOM中，对HTML节点进行抽象，用JS对象的形式表示HTML
改变了过去对HTML节点的理解
呈现在用户面前的页面就是一个复杂的递归对象,大致结构如下

const globalDom = {
  tagName: 'html',
  children: [
    {
      tagName: 'head'
    },
    {
      tagName: 'body',
      children: [
        {
          tagName: 'div',
          attributes: {
            className: 'test'
          }
        }
      ]
    }
  ]
}

Virtual DOM diff

react子组件排序是把前面的组件移到目标后面，而不是把目标组件直接往前移，这样就容易造成性能浪费，因为前面要移到后面的组件可能有很多

Virtual DOM diff 是react协调中的一个环节，
我们把UI节点从内存中同步转化为真实的DOM或者真实的节点这个过程叫做协调
Virtual DOM diff在react15 版本中叫做暂协调

总结

1. Virtual DOM不仅仅是抽象了html dom操作，他更重要的是抽象了UI节点
2. 他带来了一种编程理念，数据驱动视图
3. Virtual DOM本身的抽象性使得跨平台成为可能

为什么Virtual DOM比原生DOM更加高效

Virtual DOM比原生DOM更加高效主要是体现在2个方面

1. 高效的diff算法实现更新
2. 可维护性和编程思维上

React 协调（React Reconciler）

React 协调是什么

React 协调就是React利用Virtual DOM将内存中出现过的UI转化为真实UI节点的过程
==React协调是整个React中最重要且最核心的部分==

React协调方式有2种，主要体现在15版本和16版本

• Stack Reconciler (栈 协调)(15版本)
• Fiber Reconciler (Fiber 协调)(16版本)

Vitual DOM diff 就是Stack Reconciler的一部分