react中的核心概念

1、DOM的本质是什么： 浏览器中的概念，用js对象来表示页面上的元素，并提供操作DOM对象的API

2、什么事react中的虚拟DOM：是框架中的概念，是程序员用js对象来模拟页面上的DOM和DOM 的嵌套

3、为什么要实现虚拟DOM：为了实现页面中DOM元素的高效更新

4、DOM和虚拟DOM的区别：

　　DOM：浏览器中提供的概念，用js对象表示页面上的元素，并提供操作议元素的API

　　虚拟DOM：手动用js对象来模拟DOM元素和嵌套关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
      1111
      <p>222222</p>
    </div>
</body>
</html>
<script>
  var div = {
    tagName: 'div',
    attrName: 1111,
    children: {
      tagName: 'p',
      attr: 2222
    }
  }
</script>

react中虚拟DOM的基本概念的更多相关文章

  1. react中虚拟dom的diff算法

    .state 数据 .jsx模板 .生成虚拟dom(虚拟DOM就是一个js对象,用它来描述真实DOM) ['div', {id:'abc'}, ['span', {}, 'hello world']] ...

  2. 聊一聊React中虚拟DOM

    1. 什么是虚拟 DOM 在 React 中实际上是 render 函数中return 的内容会生成 DOM,return 中的内容由两部分组成,一部分是 JSX ,另一部分就是 state 中的数据 ...

  3. react中虚拟DOM

    简单来说虚拟DOM就是一个js对象,相对于真实dom来做比较更节约性能,虚拟DOM执行过程如下

  4. 简单实现react中虚拟DOM渲染

    /** * @method createElement * @param type {string} * @param props {Object} * @param children {string ...

  5. React的虚拟DOM

    ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...

  6. 【React自制全家桶】二、分析React的虚拟DOM和Diff算法

    一.React如何更新DOM内容: 1.  获取state 数据 2.  获取JSX模版 3.  通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...

  7. React之虚拟DOM中的Diff算法

    一.React中的setState ( 异步函数,异步获取数据 ) 若操作的时间间隔短,它可以将多个setState结合成一个setState,减少虚拟DOM的比对次数,提高性能 二.同层虚拟DOM对 ...

  8. JavaScript是如何工作的：编写自己的Web开发框架 + React及其虚拟DOM原理

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  9. react 的虚拟dom

    前端优化的主要方面就是减少页面的DOM操作,减少重排和重绘,React在这方面做了优化,采用了所谓的虚拟DOM,其实我们平时也会遇到虚拟DOM,只是你没有注意罢了,请听我娓娓道来.  所谓的虚拟DOM ...

随机推荐

  1. Android开发之裁切（拍照+相冊）图像并设置头像小结

    先看效果:                                       watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5 ...

  2. 深入Garbage First垃圾收集器（三）G1中的垃圾收集

    G1 GC在收集暂停的过程中会回收绝大部分堆分区,唯一的例外是多级并发标记期间的清除阶段. 在清除阶段,如果G1遇到仅仅只存放了垃圾的分区,它就会立刻收集这些分区并将它们放回空闲分区列表中,因此这些分 ...

  3. 计算IMEI号的校验位

    计算IMEI号的校验位 移动设备国际识别码(IMEI:International Mobile Equipment Identification Number)是差别移动设备的标志,具有唯一性,贴在手 ...

  4. 多线程（C++）临界区Critical Sections

    一 .Critical Sections(功能与Mutex相同,保证某一时刻只有一个线程能够访问共享资源,但是不是内核对象,所以访问速度比Mutex快,但是没有等待超时的功能,所以有可能导致死锁,使用 ...

  5. ASP.NET MVC EXTJS 通用主菜单框架

    一.说明 首先我不知道定义的文章标题是不是准确,我这篇博文介绍的是一个通用的软件主菜单框架,界面布局用的是extjs,还是先上一个图吧. 软件主界面左侧菜单采用的风格是extjs的手风琴模式,需要注意 ...

  6. ssh服务配置文件---sshd_config详解

     关于 SSH Server 的整体设定,包含使用的 port 啦,以及使用的密码演算方式 Port 22 # SSH 预设使用 22 这个 port,您也可以使用多的 port !  # 亦即重复使 ...

  7. 挂断电话demo

    <!-- 结束通话和打电话的权限 --> <uses-permission android:name="android.permission.CALL_PHONE" ...

  8. querySelectorAll和getElementsBy 系列比较

    querySelectorAll 相比下面这些方法有什么区别? (1)getElementsByTagName (2)getElementsByClassName (3)getElementsByNa ...

  9. HackerRank leonardo-and-lucky-numbers —— 模线性方程的通解

    题目链接:https://vjudge.net/problem/HackerRank-leonardo-and-lucky-numbers 题解: 1.根据扩展欧几里得:7*x + 4*y = gcd ...

  10. 分布式锁（Zookeeper实现）

    分布式锁 分布式锁,这个主要得益于 ZooKeeper 为我们保证了数据的强一致性.锁服务可以分为两类,一个是 保持独占,另一个是 控制时序. 1. 所谓保持独占,就是所有试图来获取这个锁的客户端,最 ...