精华内容
下载资源
问答
  • 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

    2021-04-23 10:15:49
    react 的引入 引入文件时蓝色框内的文件要在红色框内的文件之前...-- 引入react-dom,用于支持react操作dom --> <script src="../js/react-dom.development.js"></script> <!-- 引入babel 用于将

    react 的引入

    在这里插入图片描述

    引入文件时蓝色框内的文件要在红色框内的文件之前引入

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx 转换为 js -->
    <script src="../js/babel.min.js"></script>
    

    为 #text 增加内容部分

    <body>
        <div id='test'>
        </div>
    </body>
    <script type="text/babel">
      // 1.创建虚拟dom // 此处不要写引号
        const VDOM = <h1>hello-react</h1>
         // 2.渲染虚拟dom到页面 // ReactDOM.render(虚拟DOM,容器) 
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
    

    虚拟DOM创建的两种方式

    js创建虚拟DOM

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 此处一定要写babel -->
    <script type="text/javascript">
      // 1.创建虚拟dom // 此处不要写引号
        // const VDOM = React.createElement(标签名,标签属性,标签内容); 
        const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,react'))
         // 2.渲染虚拟dom到页面 // ReactDOM.render(虚拟DOM,容器) 
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
    

    jsx创建虚拟DOM

    <!-- 引入react核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作dom -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 引入babel 用于将jsx 转换为 js -->
    <script src="../js/babel.min.js"></script>
    <!-- 此处一定要写babel -->
    <script type="text/babel">
      // 1.创建虚拟dom // 此处不要写引号
        const VDOM =(
          <h1 id='title'>
            <span>hello-react</span>  
          </h1>
        ) 
         // 2.渲染虚拟dom到页面 // ReactDOM.render(虚拟DOM,容器) 
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script>
    

    虚拟DOM和真实DOM的区别

    <script type="text/babel">
      // 1.创建虚拟dom // 此处不要写引号
        const VDOM =(
          <h1 id='title'>
            <span>hello-react</span>  
          </h1>
        ) 
         // 2.渲染虚拟dom到页面 // ReactDOM.render(虚拟DOM,容器) 
        ReactDOM.render(VDOM,document.getElementById('test'))
        const TDOM = document.getElementById('test');
        console.log('虚拟DOM',VDOM);
        console.log('真实DOM',TDOM);
        debugger;
        console.log(typeof VDOM);
        console.log(VDOM instanceof Object);
        /* 
          关于虚拟DOM:
            1.本质是Object类型的对象(一般对象)
            2.虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部再用,无需真实DOM上那么多属性
            3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上。
        */
    </script>
    

    debugger 表示断点

    展开全文
  • React 虚拟 Dom

    2021-07-30 10:03:17
    虚拟 DOM(Virtual DOM)本质上是JS 和 DOM 之间的一个映射缓存,它在形态上表现为一个能够描述 DOM 结构及其属性信息的 ...React 中的虚拟 DOM 大致是如何工作的? 挂载阶段:React 将结合 JSX 的描述,构建出虚拟 ..

    虚拟 DOM(Virtual DOM)本质上是JS 和 DOM 之间的一个映射缓存,它在形态上表现为一个能够描述 DOM 结构及其属性信息的 JS 对象

    需要把握住以下两点

    虚拟 DOM 是 JS 对象

    虚拟 DOM 是对真实 DOM 的描述

    虚拟 DOM 创作过程,到底有没有向模板引擎去学习,这个暂时无从考证,模板引擎和虚拟 DOM 确实在思想上存在递进关系(面试官爱问)
     

    React 中的虚拟 DOM 大致是如何工作的?

    挂载阶段:React 将结合 JSX 的描述,构建出虚拟 DOM 树,然后通过 ReactDOM.render 实现虚拟 DOM 到真实 DOM 的映射(触发渲染流水线);

    更新阶段:页面的变化在作用于真实 DOM 之前,会先作用于虚拟 DOM,虚拟 DOM 将在 JS 层借助算法先对比出具体有哪些真实 DOM 需要被改变,然后再将这些改变作用于真实 DOM

    为什么需要虚拟 DOM?虚拟 DOM 的优势何在?虚拟 DOM 是否伴随更好的性能?

    虚拟dom工作流:

    当 DOM 操作(渲染更新)比较频繁时,它会先将前后两次的虚拟 DOM 树进行对比,定位出具体需要更新的部分,生成一个“补丁集”,最后只把“补丁”打在需要更新的那部分真实 DOM 上,实现精准的“差量更新”

    虚拟 DOM 并不一定会带来更好的性能,React 官方也从来没有把虚拟 DOM 作为性能层面的卖点对外输出过。虚拟 DOM 的优越之处在于,它能够在提供更爽、更高效的研发模式(也就是函数式的 UI 编程方式)的同时,仍然保持一个还不错的性能

    模板渲染和虚拟dom的工作流对比:

    模板渲染是全量更新,而虚拟 DOM 是差量更新

    乍一看好像差量更新一定比全量更新高效,但你需要考虑这样一种情况:数据内容变化非常大(或者说整个发生了改变),促使差量更新计算出来的结果和全量更新极为接近

    DOM 更新的工作量基本一致,而虚拟 DOM 却伴随着开销更大的 JS 计算,此时会出现的一种现象就是模板渲染和虚拟 DOM 在整体性能上难分伯仲:若两者最终计算出的 DOM 更新内容完全一致,那么虚拟 DOM 大概率不敌模板渲染;但只要两者在最终 DOM 操作量上拉开那么一点点的差距,虚拟 DOM 就将具备战胜模板渲染的底气

    因为虚拟 DOM 的劣势主要在于 JS 计算的耗时,而 DOM 操作的能耗和 JS 计算的能耗根本不在一个量级

    上面讨论的这种情况相对来说比较极端。在实际的开发中,更加高频的场景是这样的:我每次 setState 的时候只修改少量的数据,在这样的场景下,模板渲染和虚拟 DOM 之间 DOM 操作量级的差距就完全拉开了,虚拟 DOM 将在性能上具备绝对的优势

    虚拟 DOM 解决的关键问题有以下两个:

    研发体验/研发效率的问题:数据驱动视图这一思想提供了高度可用的载体,使得前端开发能够基于函数式 UI 的编程方式实现高效的声明式编程

    跨平台的问题

    批量更新也是虚拟 DOM 在性能方面所做的一个重要努力:“批量更新”在通用虚拟 DOM 库里是由 batch 函数来处理的,batch 的作用是缓冲每次生成的补丁集,它会把收集到的多个补丁集暂存到队列中,再将最终的结果交给渲染函数,最终实现集中化的 DOM 批量更新

    展开全文
  • 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

    2021-05-03 16:29:32
    在实际开发中基本无需关心虚拟DOM是如何运作的,但是理解其运行机制不仅有助于更好的理解React组件的生命周期,而且对于进一步优化 React程序也会有很大帮助。 我们先自己实现React底层 方式一 1. 拿到s
  • React 虚拟DOM

    2017-09-15 18:20:07
    一、什么是虚拟DOM React非常快速是因为它从不直接操作DOM。...在React中,render执行的结果得到的并不是真正的DOM节点,而仅仅是JavaScript对象,称之为虚拟DOM虚拟DOM具有批处理和高效的Diff算法,可以
  • 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原理中,我们探索了如何创建虚拟DOM,那么创建了虚拟DOM之后,又是怎么转换成真实DOM,渲染在页面中的呢,下面我们继续探索。 ...
  • virtualDomDemo:React虚拟Dom测试演示
  • React虚拟DOM浅析

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

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

    2020-07-08 21:24:12
    React 虚拟dom原理小结虚拟DOM原理简述JS原生代码模拟实现 虚拟DOM原理 简述 虚拟Dom相当于在真实dom和js中间加了一个缓存,将真实的dom转化成一个json对象,从而利用diff算法避免了不必要的dom操作,以此提高性能...
  • react虚拟dom解读

    2019-04-16 16:09:51
    react虚拟dom解读什么是虚拟dom?一、DOM是什么?二、浏览器呈现页面机制虚拟dom有什么好处功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的...
  • 1.虚拟DOM是什么?一个虚拟DOM(元素)是一个一般的js对象,准确的说是一个对象树(倒立的);虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应;如果只是更新虚拟DOM,页面是不会重绘的。Virtual DOM ...
  • 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概念

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

    2020-12-13 18:58:46
    React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用对象属性来描述节点,实际上它是一层对真实DOM的抽象,最终可以通过渲染操作使这棵树映射到真实环境上,简单来...
  • react虚拟dom的简单理解 最近在react的学习中学到了虚拟dom,在这里简单记录一下我对虚拟dom的初步的理解。 DOM树的概念: 浏览器请求服务器获取网页; 浏览器将网页代码存储在浏览器内存中,并且在内存中解析代码...
  • 下面简单解释一下react虚拟dom机制和diff算法的实现思想: 要讲虚拟dom机制必须提到一个概念——虚拟dom树,这是react在真实dom树基础上建立的一个抽象的树,应用、虚拟dom与真实dom的关系如下图显示: 而标准的...
  • React虚拟DOM的好处

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

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 19,318
精华内容 7,727
关键字:

react虚拟dom