Vdom 的认识

1： vdom：用js 对象描述DOM的层级结构。 DOM中的一切属性在虚拟DOM中都有对应的属性。

diff: 算法在计算机中语言中就是精细化， 最小量更新的算法。 diff 算法是发生在虚拟DOM 上的，  会同曾比较， 不会跨层比较（实现最小量更新的）

新虚拟DOM 和 老虚拟DOM进行diff 比较（精细化比较）， 算出如何应该最小量更新。

最后反应到真正的DOM 树上。

2： 新的虚拟DOM和 老的虚拟DOM  进行比较， 而不是新的虚拟DOM 和DOM 进行比较。 加快更新效率。

如果发现有新的节点生成， 首先createElement,  然后appendchildren  插入节点。

diff 算法发生在虚拟DOM 节点上；

snabbdom: 库,  是著名的DOM 库， 是diff 算法的鼻祖。 vue 源码借鉴了snabbdom库。

3：真正DOM 如何变成虚拟DOM， 属于模板变异的范畴。 mustache 语法       把 html 结构转化为 js 对象

  虚拟DOM:  就是将一个真实对象描述为一个javascript 对象。 DOM 的真实结构

研究一： 虚拟DOM如何被渲染函数（h 函数）产生；（虚拟DOM 如何被渲染函数产生的）  h 函数就是渲染函数；

               书写h 函数

研究二： diff 算法原理?  ==> ( 手写diff 算法 )   diff 算法就是两个虚拟DOM 进行差异化比较； （同级比较）

研究三： 虚拟DOM 如何通过diff 算法变成真实DOM的。

              事实上虚拟DOM 变成真正DOM，  是涵盖在diff 算法中的。

h 函数是用来产生虚拟节点：    h 函数用来产生虚拟节点 

创建patch 函数：  patch： 函数式diff 算法的核心的函数。

虚拟dom ？

虚拟比真实DOM 轻（身上属性少）， 真实DOM 比较重 (身上的属性比较多)

因为虚拟dom 是react 内部在使用， 身上无需这么多属性。

虚拟DOM的本质：是一个object 类型的对象（一般对象）。

用js 对象模拟一颗DOM 树，放在浏览器内存中， 当需要变更dom 操作时，虚拟dom 使用diff 算法进行新旧虚拟dom 操作比较,  将变更放到变更队列中操作， 反映到实际Dom 树， 较少dom 操作。

虚拟dom 将DOM 树转化js 对象树， 然后进行diff 算法比较删除操作， 但是， 有多个相同的元素， 可能会浪费性能， 所以react 中 和vue 中 -for  引入key 值进行区分。

优点：  虚拟dom 具有批处理和高效的diff 算法， 最终表现在DOM 上修改只是部分变更的部分， 可以保证非常高效的渲染，优化性能。

缺点：  首次渲染大量DOM 时， 由于多了虚拟dom 的计算， 会比innerhtml 插入的慢。
虚拟DOM 最终会会被React 转化为真实DOM, 呈现在页面上 (因为虚拟DOM 存在内存中);
jsx: 就是可以看作是一个语法糖: 方面书写虚拟DOM 语法。
jsx 语法 是Raect 定义的一种类似于XML 的 JS扩展语法： 本质是: JS + XML 本质是: 就是React.createElement(component, props, ...children) 方法的语法糖。