精华内容
下载资源
问答
  • react 虚拟dom

    2018-07-11 13:51:19
    react 虚拟dom的优点:数据渲染到页面的方式: 1).手动for循环整个数组; 2).使用模板引擎; 缺点:性能上的问题比较严重 列如:列表的排序等,需要重新渲染页面的某个需求,重新渲染页面的性能。如何提高性能? ...
    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));
    
    


    展开全文
  • React虚拟Dom

    2020-06-11 19:41:09
    react 在内存中生成维护一个跟真实DOM一样的虚拟DOM 树,在改动完组件后,会再生成一个新得DOM,react 会把新虚拟DOM 跟原虚拟DOM 进行比对,找出两个DOM 不同的地方diff ,然后把diff放到队列里面,然后批量更新...

    原理:

    react 在内存中生成维护一个跟真实DOM一样的虚拟DOM 树,在改动完组件后,会再生成一个新得DOM,react 会把新虚拟DOM 跟原虚拟DOM 进行比对,找出两个DOM 不同的地方diff ,然后把diff放到队列里面,然后批量更新diff 到真实DOM 上

    优点:最终真实DOM 就只更新了diff 部分,提高了渲染速度

    1.什么是虚拟DOM


    我们在前端面试的时候,经常会被问到什么是虚拟DOM。这个概念,感觉很熟悉,但又说不出它到底是什么。现在我们来探索一下到底什么是虚拟DOM。

    首先我们看下什么是DOM,对于DOM,我们应该都很熟悉了,下面是MDN对于DOM的定义

    文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript,但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM模型用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内容。节点可以关联上事件处理器,一旦某一事件被触发了,那些事件处理器就会被执行。

    虚拟DOM自然就是跟DOM有很大关系的了。我们在使用原生JS开发或者使用Jquery开发,经常就会操作DOM,但是我们使用的时候发现,每次我们改变DOM的时候,页面再次渲染,会花费不短的一段时间,这样用户体验就不太好了。如果我们每次操作的不是DOM或者每次只操作更少的DOM呢,是不是会花费的时间更短呢,基于这个想法,就有了虚拟DOM。

    在React中,会把DOM转换成JavaScript对象,然后再把JavaScript对象转化成DOM,这样我们对于DOM的操作,实际上是在操作这个JavaScript对象。

    2.DOM是如何创建虚拟DOM的


    我们利用在线babel工具来看下。左边是JSX,右边是JSX经过babel转换后的效果,事实上JSX是右边这种写法的语法糖,我们在React项目中写的JSX的写法都会转换成右边这种写法。

    在React项目中,使用以下这种写法,渲染出的效果也是一样的。

    import React from 'react';
    import ReactDOM from 'react-dom';
    
    let element = React.createElement("h1", {
        id: "test",
        className: "testClass"
      }, "test");
    
    ReactDOM.render(element, document.getElementById('root'));

    现在我们来分析以下上面的代码

    • React.createElement()方法传入了3个参数,第1个参数对应的是标签名称,第2个参数是属性,第三个参数是内容,然后返回某个值
    • ReactDOM.render()方法接收了两个参数,第一个参数是刚刚提到的某个值,第二个参数是获取到的root元素,对应的是index.html中的<div id="root"></div>

    在上面的代码中加入console.log(element),打印出element的值,然后看到,原来某个值是这样的:

    3.模拟实现React.createElement()
    有上图可以这个对象有多个属性,目前来说对我们比较重要的是props和type属性,所以先实现对于这两个属性的操作。
    React.createElement()接收3个参数,现在要把这3个参数合并到type和props中。
    React.createElement()接收3个以上参数,说明该元素里面有多个子元素(这些子元素仍然是React.createElement()),那么把第二个参数后面的所有参数转换成数组放入children中

    function ReactElement(type, props) {
        const element = { type, props };
        return element;
    }
    
    function createElement(type, config = {}, children) {
        let propName;
        const props = {};  // 定义props
        for(propName in config) {
            props[propName] = config[propName];  // 复制config的属性到props中
        }
    
        // 处理children
        const childrenLength = arguments.length - 2;
        if(childrenLength === 1) {
            props.children = children;
        } else {
            // 有多个子元素的情况
            props.children = Array.from(arguments).slice(2);
        }
    
        return ReactElement(type, props);
    }



    加入以下代码测试下效果

    const element = createElement("h1", {
        id: "test",
        className: "testClass"
      }, createElement("span", null, "span1"), createElement("span", null, "span2"));
    
    console.log(JSON.stringify(element))
    


    打印结果为:

    å¨è¿éæå¥å¾çæè¿°

    可以看到,最终,DOM转换成了JavaScript对象。
     

    展开全文
  • react虚拟DOM

    2019-04-23 13:49:17
    虚拟DOM React为啥这么大?因为它实现了一个虚拟DOM(Virtual DOM)。虚拟DOM是干什么的?这就要从浏览器本身讲起。 如我们所知,在浏览器渲染网页的过程中,加载到HTML文档后,会将文档解析并构建DOM树,然后将...

    虚拟DOM

    React为啥这么大?因为它实现了一个虚拟DOM(Virtual DOM)。虚拟DOM是干什么的?这就要从浏览器本身讲起。

     

    如我们所知,在浏览器渲染网页的过程中,加载到HTML文档后,会将文档解析并构建DOM树,然后将其与解析CSS生

    成的CSSOM树一起结合产生爱的结晶——RenderObject树,然后将RenderObject树渲染成页面(当然中间可能会有一

    些优化,比如RenderLayer树)。这些过程都存在与渲染引擎之中,渲染引擎在浏览器中是于JavaScript引擎

    (JavaScriptCore也好V8也好)分离开的,但为了方便JS操作DOM结构,渲染引擎会暴露一些接口供JavaScript调用。

    由于这两块相互分离,通信是需要付出代价的,因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳

    实践也都在尽可能的减少DOM操作次数。

     

    而虚拟DOM干了什么?它直接用JavaScript实现了DOM树(大致上)。组件的HTML结构并不会直接生成DOM,而是

    映射生成虚拟的JavaScript DOM结构,React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更,再把这些变

    更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在,计算性能会比较好,而且由于减少了实际DOM操作次数,

    性能会有较大提升。

    展开全文
  • React 虚拟DOM

    2017-09-15 18:20:07
    一、什么是虚拟DOM React非常快速是因为它从不直接操作DOM。...在React中,render执行的结果得到的并不是真正的DOM节点,而仅仅是JavaScript对象,称之为虚拟DOM虚拟DOM具有批处理和高效的Diff算法,可以



    一、什么是虚拟DOM

    React非常快速是因为它从不直接操作DOM

    虚拟DOM是在DOM的基础上建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中。

    React中,render执行的结果得到的并不是真正的DOM节点,而仅仅是JavaScript对象,称之为虚拟DOM

    虚拟DOM具有批处理和高效的Diff算法,可以无需担心性能问题而随时刷新整个页面,因为虚拟DOM可以确保只对界面上真正变化的部分进行实际的DOM操作


    二、传统AppReact App的对比

    innerHTMLrender html字符串 + 重新创建所有 DOM 元素

    虚拟DOMrender 虚拟DOM + diff + 更新必要的 DOM 元素


    三、虚拟DOM的原理

    React会在内存中维护一个虚拟DOM树,对这个树进行读或写,实际上是对虚拟DOM进行。当数据变化时,React会自动更新虚拟DOM,然后将新的虚拟DOM和旧的虚拟DOM进行对比,找到变更的部分,得出一个diff,然后将diff放到一个队列里,最终批量更新这些diffDOM中。


    四、虚拟DOM的优点

    最终表现在DOM上的修改只是变更的部分,可以保证非常高效的渲染。


    五、虚拟DOM的缺点

    首次渲染大量DOM时,由于多了一层虚拟DOM的计算,会比innerHTML插入慢。


    关于 diff 算法

    http://www.infoq.com/cn/articles/react-dom-diff/


    展开全文
  • react虚拟dom

    2019-05-24 09:54:51
    第一种方式: 整体替换DOM 1、 state数据 2、 JSX 模板 3、 数据 + 模板 生成真实的DOM 来显示 4、 state 发生变化 5、 数据 + 模板 生成真实的DOM, 替换原始的DOM 缺陷: 第一次生成了一个完整的DOM片段 第二次...
  • React虚拟DOM

    2018-10-31 10:14:47
    首先理解什么是DOMDOM(Document Object Model),即文档对象模型。 DOM元素是网页的基本元素,大量的DOM元素构成了一个完整的页面。但DOM是很慢的,其元素非常庞大。一般页面的性能问题很少是由JS引起的,大部分都...
  • react虚拟dom原理This is part of my “React for beginners” series on introducing React, its core features and best practices to follow. More articles are coming! 这是我的“初学者React”系列的一部分,...
  • React虚拟DOM浅析

    2017-11-29 14:13:45
    React虚拟DOM浅析  在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制。 ...
  • 关于React 虚拟DOM

    2020-07-08 21:24:12
    React 虚拟dom原理小结虚拟DOM原理简述JS原生代码模拟实现 虚拟DOM原理 简述 虚拟Dom相当于在真实dom和js中间加了一个缓存,将真实的dom转化成一个json对象,从而利用diff算法避免了不必要的dom操作,以此提高性能...
  • 在上一篇博客React虚拟DOM原理中,我们探索了如何创建虚拟DOM,那么创建了虚拟DOM之后,又是怎么转换成真实DOM,渲染在页面中的呢,下面我们继续探索。 ...
  • react 虚拟dom 浅析

    2018-11-25 14:59:08
    react 虚拟dom 浅析 虚拟dom 的概念 随着 react vue 等框架的普及 在前端圈一度成为一个热议的话题 争论点在于 虚拟dom 真的可以提高 操作dom的性能么 与传统的jq 相比 性能到底有多大提升 于是带着这两个...
  • react虚拟DOM的机制

    万次阅读 2019-04-20 23:13:30
    基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的...
  • React虚拟DOM机制 虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象 状态变更时,记录新树和旧树的差异 最后把差异更新到真正的dom中 React引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了...
  • react虚拟dom解读

    2019-04-16 16:09:51
    react虚拟dom解读什么是虚拟dom?一、DOM是什么?二、浏览器呈现页面机制虚拟dom有什么好处功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的...
  • React虚拟DOM概念

    2017-05-30 19:46:00
    React虚拟DOM概念 虚拟DOM的结构 在传统的 Web 应用中,我们往往会把数据的变化实时地更新到用户界面中,于是每次数据的微小变动都会引起 DOM 树的重新渲染。如果当前 DOM 结构较为复杂,频繁的操作很可能会引发性能...
  • React虚拟DOM的好处

    2018-12-14 15:17:44
    关于React虚拟DOM的令人愉悦的地方在于web开发过程中,它采用了更加高效的方式来更新view层。 我们把使用React的其他好处姑且放到一边,例如单项绑定和组件化。本节我讲详细的讨论一下虚拟DOM,随后公正的抉择为什么...
  • React虚拟DOM的理解

    2020-12-13 18:58:46
    React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲染操作使这棵树映射到真实环境上,简单来...
  • react虚拟dom diff算法

    2018-05-17 19:10:00
    react虚拟dom:依据diff算法 前端:更新状态、更新视图;所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快!jsg更容易表示节点 所以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,987
精华内容 1,194
关键字:

react虚拟dom