dom对比 react_react react-dom - CSDN
  • react虚拟DOM的机制

    万次阅读 2019-08-04 10:37:51
    基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的...

    虚拟DOM的介绍:
    虚拟DOM就是一个真实DOM转换的JS对象。
    虚拟DOM的机制:
    在浏览器端用JavaScript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后React将当前整个DOM树和上一次的DOM树进行对比,得到DOM结构的区别,然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新,在一个事件循环(Event Loop)内的俩次数据变化会被合并,例如你连续的先将节点内容从A变成B,然后又从B变成A,React会认为UI不发生任何变化,而如果通过手动控制,这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树,但是因为虚拟DOM是内存数据,性能是极高的,而对实际DOM进行操作的仅仅是Diff部分,因而能达到提高性能的目的。这样,在保证性能的同时,开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何Render的。

    虚拟DOM性能更快的原因:
    真实的DOM中有各种DOM事件,属性,而虚拟DOM中没有那么多无用的东西,所以当浏览器去进行遍历的时候,遍历虚拟DOM的速度是比真实DOM快非常非常多的,而且虚拟DOM还有diff算法,又将算法的复杂度降低了一个维度。

    关于虚拟DOM的diff算法请看:https://blog.csdn.net/weixin_43606158/article/details/89422894

    展开全文
  • React之虚拟DOM

    2018-09-27 15:36:16
    React非常快速是因为它从不直接操作DOM。 在React中,render执行的结果得到的并不是真正的DOM节点,而仅仅是JavaScript对象,称之为虚拟DOM。 虚拟DOM是在DOM的基础上建立了一个抽象层,对数据和状态所做的任何...

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

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

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

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

    在实际开发中无需关心虚拟DOM是如何运作的,但理解其运行机制不仅有助于更好的理解React组件的生命周期,而且对于进一步优化 React程序也有很大帮助。

     

    • 传统App与React App的对比:

    传统App:

    React App:

     

    innerHTML:render html字符串 + 重新创建所有 DOM 元素

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

     

    • 虚拟DOM的原理:

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

     

    • 虚拟DOM的优点:

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

     

    • 虚拟DOM的缺点:

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

     

    • 虚拟DOM的理解误区

    对虚拟DOM的理解往往停留在:通过JavaScript对象模拟原生DOM,加上DOM Diff 极大提升了DOM操作的性能。然而,虚拟DOM最大的意义不在于性能的提升(JavaScript对象比DOM对象性能高),而在于抽象了DOM的具体实现(对DOM进行了一层抽象),这在浏览器中使用 React时不是特别明显,因为写的DOM标签跟原生的没有区别,并且最终都被渲染成了DOM,在React Native中将会有很好的说明。

    展开全文
  • React虚拟DOM及创建虚拟DOM的两种方式

    千次阅读 2018-11-29 17:03:05
    1.虚拟DOM是什么? 一个虚拟DOM(元素)是一个一般的js对象,准确的说是一个对象树(倒立的);虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应;如果只是更新虚拟DOM,页面是不会重绘的。 Virtual ...

    1.虚拟DOM是什么?

    一个虚拟DOM(元素)是一个一般的js对象,准确的说是一个对象树(倒立的);虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应;如果只是更新虚拟DOM,页面是不会重绘的。
    Virtual DOM 算法的基本步骤:
    用JS对象树表示DOM树的结构;然后用这个树构建一个真正的DOM树插到文档当中;当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树差异;把差异应用到真实DOM树上,视图就更新了。
    进一步理解:
    Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘,既然硬盘这么慢,我们就在它们之间加个缓存:既然 DOM 这么慢,我们就在它们JS 和 DOM 之间加个缓存。CPU(JS)只操作内存(Virtual DOM),最后的时候再把变更写入硬盘(DOM)。

    2.JSX

    (1)JSX(JavaScript XML)

    react定义的一种类似于XML的JS扩展语法:XML+JS
    作用:用来创建react虚拟DOM(元素)对象。
    js中直接可以套标签,但标签要套js需要放在{}中,在解析显示js数组时,会自动遍历显示。
    把数据的数组转换为标签的数组:

    var liArr = dataArr.map(function(item, index){
            return <li key={index}>{item}</li>
          })
    

    注意:标签必须有结束;标签的class属性必须改为className属性;标签的style属性值必须为: {{color:‘red’, width:12}}

    例如:

    var ele = <h1>Hello JSX<h1>
    

    注意:它不是字符串,也不是HTML/XML标签;它最终产生的就是一个JS对象。

    (2)标签名任意:HTML标签或其他标签;标签属性任意:HTML标签属性或其他。

    (3)基本语法规则

    遇到 <开头的代码,以标签的语法解析:html同名标签转换为html同名元素,其它标签需要特别解析;遇到以 { 开头的代码,以JS的语法解析: 标签中的js代码必须用{}包含。

    (4)babel.js的作用

    浏览器的js引擎是不能直接解析JSX语法代码的,需要babel转译为纯JS的代码才能运行;只要用了JSX,都要加上type=“text/babel”,声明需要babel来处理。

    3.渲染虚拟DOM(元素)

    语法: ReactDOM.render(virtualDOM, containerDOM)
    作用: 将虚拟DOM元素渲染到真实容器DOM中显示
    参数说明:
    参数一: 纯js或jsx创建的虚拟dom对象
    参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

    4.创建虚拟DOM的两种方式

    (1)纯js(一般不用)

    React.createElement('h1', {id:'myTitle'}, title)
    

    (2)JSX

    页面结构:

    <h1 id='myTitle'>{title}</h1>
    <div id='example1'></div>
    <div id='example2'></div>
    

    JS:
    在这里插入图片描述

    页面效果:
    在这里插入图片描述

    关注微博、微信公众号搜索前端小木,让我们一起学习成长。

    展开全文
  • React 虚拟DOM的理解

    千次阅读 2017-08-30 13:54:18
    React框架现在用的人非常多,React为何如此受欢迎?我想原因是引入了虚拟DOM的概念,从而使得性能有所提升吧。为什么引入虚拟DOM性能就有提升了?下面我想来说一说虚拟DOM的原理。什么是虚拟DOMReact中,先将真实...

    React框架现在用的人非常多,React为何如此受欢迎?我想原因是引入了虚拟DOM的概念,从而使得性能有所提升吧。为什么引入虚拟DOM性能就有提升了?下面我想来说一说虚拟DOM的原理。

    什么是虚拟DOM?

    React中,先将真实的DOM抽象成一个JavaScript对象,也就是虚拟DOM。比如,我们可以构造一个虚拟DOM:

    var element = {
        element: 'ul',
        props: {
            id:"ulist"
        },
        children: [
        { element: 'li', props: { id:"first" }, children: ['这是第一个List元素'] },
        { element: 'li', props: { id:"second" }, children: ['这是第二个List元素'] }
        ]
    }

    为了后面可以调函数来将虚拟DOM对象转换成真实DOM,我们用一个构造函数将上面的对象封装下:

    function Element( tagname, props, children ) 
    { 
        this.TagName = tagname; 
        this.props = props; 
        this.children = children; 
    }
    
    var u = new Element( 'ul', { id: 'ulist'}, [
        new Element( 'li', { id:"first" }, ['这是第一个List元素']), 
        new Element( 'li', { id:"first" }, ['这是第一个List元素'])
        ]);

    这时候的e 就是一个Element对象,里面包含TagName,props以及children属性,并且children也是Element对象。下来我们来思考下如何将这个对象转换成真实的DOM结构。

    Element.prototype.render = function( ) {
        var d = document.createElement( this.TagName );
        for( key in this.props) {
            d.setAttribute( key, this.props[key] );
        }
    
        this.children.forEach( function(child){
            if(child instanceof Element) {
                tnode = child.render();
            }
            else
            {
                tnode = document.createTextNode(child);
            }
            d.appendChild(tnode);
        })
        return d;
    }
    
    let ele = u.render();
    document.body.appendChild(ele);

    这样就把我们构造的虚拟DOM对象转换成真实DOM,并呈现到页面上了。

    React中虚拟DOM原理

    在React中,也有一个render函数来将虚拟DOM树,并且,React中有state转移的过程,所以每次state有变化之后,就会触发render函数,重新构造一个虚拟DOM树。对比新旧虚拟DOM树的差别,记录下差异,然后只针对差异部分对应的真实DOM进行操作。
    如何进行新旧虚拟DOM树的对比呢?
    这里采用的是Diff算法。Diff算法比较复杂,主要的思路是这样的。
    首先,每一次生成的虚拟DOM树上的各个节点都对应唯一的一个id,当第二次生成了新的DOM树时,对原来树上的每一个节点对比新树上对应节点,如果不同,就记录下来这个差异。同时,差异也分为很多种:

    替换节点;
    修改属性;
    对文本内容修改
    移动、删除、增加节点;
    

    对每一类记录下差异之后,针对不同的差异进行不同的操作。

    比如,替换节点就需要调原生JS的repaceChild()接口;对于修改属性,则要调setAttribute()接口等等。
    

    至于具体算法的细节,暂时还没有深究,希望有兴趣的可以一起交流。

    参考-如何理解虚拟DOM

    展开全文
  • react 虚拟dom

    2018-07-11 13:54:20
    react 虚拟dom的优点:数据渲染到页面的方式: 1).手动for循环整个数组; 2).使用模板引擎; 缺点:性能上的问题比较严重 列如:列表的排序等,需要重新渲染页面的某个需求,重新渲染页面的性能。如何提高性能? ...
  •  1.React并不直接操作DOMReact中的render方法,返回一个DOM描述,React能够将这个DOM描述与内存中的表现进行比较,然后以最快的方式更新浏览器  2.React实现了一整套事件系统,所有的事件对象符合W3C规范,并且...
  • 2.在网上查到了vue与react虚拟dom的区别是: 网上答案:virtual DOM不一样,vue会跟踪每一个组件的依赖关系, 不需要重新渲染整个组件树.​​ 而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react...
  • React虚拟DOM机制 虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象 状态变更时,记录新树和旧树的差异 最后把差异更新到真正的domReact引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了...
  • React提供了一个声明式的API,所以你不必担心每次DOM更新时内部会修改哪些东西。虽然在React中并不是那么明显地告诉你具体如何实现的,不过这也让编写应用变得更加容易。 本文会详细解释在React中的“diffing”...
  • React入门03-react中操作组件的dom节点

    千次阅读 2018-01-25 20:55:01
    一、react的虚拟dom 1、在react中,其最大的亮点在于虚拟DOM技术,它极大强度上提升了应用性能。 2、在Web开发中,我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作...
  • 什么是虚拟DOM?传统的 DOM 操作是直接在 DOM 上操作的,当需要修改一系列元素中的值时,就会直接对 DOM 进行操作。而采用 Virtual DOM 则会对需要修改的 DOM 进行比较(DIFF),从而只选择需要修改的部分。也因此...
  • 1、React-router与React-router-dom的API对比 React-router:提供了router的核心api。如Router、Route、Switch等,但没有提供有关dom操作进行路由跳转的ap; React-router-dom:提供了BrowserRouter、Route、Link...
  • React 虚拟DOM

    2017-09-15 18:20:07
    一、什么是虚拟DOM React非常快速是因为它从不直接操作DOM。 虚拟DOM是在DOM的基础上建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中。 在React中...
  • React:DOM树与虚拟DOM树(概念与区别) **DOM的本质:**浏览器中的概念,用JS对象来表示页面上的元素,并提供了操作DOM对象的API; **React中的虚拟DOM:**是框架中的概念,是程序员 用JS对象来模拟页面上的DOMDOM...
  • 随着近年来前端行业迅速的崛起 前端已经不仅仅局限于将页面展示出来了,更多的是考虑性能的优化和用户的体验,因而越来越多的框架应运而生,angular,react ,vue 三大开源框架 目前在前端行业三足鼎立,人家站稳...
  • react.js在我们现在的前端开发应用非常广泛,而在前端面试中也常有这样的题目:虚拟dom与真实dom有什么区别?如果你很快答上来它们之间的区别,那么下一个问题就是:为什么说虚拟dom比较快? 好的,就算你知道了它...
  • 浅谈React的最大亮点——虚拟DOM

    万次阅读 2017-05-04 16:51:56
    React非常快速是因为它从不直接操作DOM。 虚拟DOM是在DOM的基础上建立了一个抽象层,对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟DOM,最后再批量同步到DOM中。 1、传统App与React App的对比: 传统...
  • React:虚拟DOM Diff算法解析

    千次阅读 2018-01-04 14:54:15
    React中最神奇的部分莫过于虚拟DOM,以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷新”整个页面,由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经...
  • react渲染机制(虚拟DOM,diff算法)

    千次阅读 2018-05-24 22:35:14
    在页面开始的时候,React会调用render函数构建一颗Dom树,在组件的props/state改变时,React会再次调用render函数构建一颗虚拟DOM树,与原来的DOM树用diff算法来进行比较,得到DOM结构变化的部分,然后将变化部分...
  • 一、创建项目 注意: 创建项目的时候,记得暴露配置文件 ( npm run eject 或者 yarn run eject ) 因为暴露配置的文件的操作不可逆,之前...yarn global add create-react-app /* 本地全局安装 react 脚手架 */ cr...
1 2 3 4 5 ... 20
收藏数 9,880
精华内容 3,952
关键字:

dom对比 react