react 虚拟Dom

什么是虚拟DOM
  1.在React中，render执行的结果得到的并不是真正的DOM节点，结果仅仅是轻量级的JavaScript对象，我们称之为virtual DOM。
  2. 虚拟DOM是React的一大亮点，虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作。在实际开发中基本无需关心虚拟DOM是如何运作的，但是理解其运行机制不仅有助于更好的理解React组件的生命周期，而且对于进一步优化 React程序也会有很大帮助。

我们先自己实现React底层

方式一
   	   1. 拿到state 数据。
       2. JSX 模板。
       3. 数据 + 模板 结合，生成真实的DOM，进行显示。
       4. state 发生变化。
       5. 重新生成新的DOM，替换原始的DOM，进行显示。

 缺陷： 一直生成DOM，极大的浪费性能。

   方式二       
        1. 拿到state 数据。
        2. JSX 模板。
        3. 数据 + 模板 结合，生成真实的DOM，进行显示。
        4. state 发生变化。
        5. 创建新的DOM和原始DOM进行比对，找到发生变化的元素。
        6. 替换掉有差异的元素。

缺陷：性能提升不明显，一直生成DOM，虽然不需要替换全部。

方式三   React底层的虚拟DOM
        1. 拿到state 数据。
        2. JSX 模板。
        3. 生成虚拟DOM（虚拟DOM就是一个js对象，用它来描述真实DOM）。
            相比js创建DOM，js创建js对象损耗了极小的性能
        4. 用虚拟DOM生成真实的DOM，进行显示。
        5. state 发生变化。
        6. 数据 +模板 生成新的虚拟DOM，
            相比生成真实DOM，生成虚拟DOM，极大的提升的性能
        7. 比较原始的虚拟DOM和新的虚拟DOM的区别，找到差异。
        8. 操作DOM，改变差异
            比如：虚拟DOM是一个对象     ['div',{id:'one'},['span',{class:'two'},'虚拟DOM']
            会生成<div id="one"><span class="two">虚拟DOM</span></div>