react 虚拟dom

你的名字 2022-05-20 02:53 230阅读 0赞

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））；