react 虚拟dom

react 虚拟dom的优点：
数据渲染到页面的方式：
 1）.手动for循环整个数组；
 2）.使用模板引擎；
 缺点：性能上的问题比较严重 列如：列表的排序等，需要重新渲染页面的某个需求，重新渲染页面的性能。

如何提高性能？
 按需渲染：只更新数据变化的那一条数据（DOM树）。
 原理：获取内存中的新旧两颗DOM树，进行对比，把数据发生变化的进行按需更新

如何获取新旧两颗DOM树？实现对比？
 因为浏览器中并没有直接提供获取DOM树的api；因此我没无法拿到浏览器内存中的DOM树；所以只能手动模拟DOM树;
 
怎么模拟DOM树？
 利用js：其实也是面向对象思想。比如我们要模拟
 '<div class="testDiv" name="我是DIV">我是div<h1>嵌套H1</h1><div>' 
 /*模拟部分*/
 var div = {
     tagName:'div',
     attrs:{
         class:'testDIv',
         name:'我是DIV'
     },
     childrens:[
         "我是DIV",
          {
            tagName:'h1',
            attrs:{},
            childrens:[
                '嵌套H1'
            ]
          }  
     ]
 }   
 /*如果部分数据发生更新*/
  var div = {
     tagName:'div',
     attrs:{
         class:'testDIv',
         name:'我是DIV'
     },
     childrens:[
         /*这条数据发生变话。只需要标记这条数据即可*/
         "我是DIV1231231231231231231231231",
          {
            tagName:'h1',
            attrs:{},
            childrens:[
                '嵌套H1'
            ]
          }  
     ]
 }   
以上就是react的虚拟dom的原理和优点； （本质：就是利用js对象的行为来模拟页面上DOM的嵌套关系就是虚拟DOM）从而实现高效更新；

怎么实现对比呢？
 Diff算法；
 tree diff：新旧两颗DOM树逐层对比的过程就是Tree Diff；当整颗DOM树对比完毕，则所有需要更新的元素，必然能够找到。 （组件对比-每一层的对比（component diff）），元素对比（element diff））；