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. A20 Android 编译

    cd lichee ./build.sh -p sun7i_android -b wing-sc3075gs cd ../android4.2 . build/envsetup.sh lunch wi ...

  2. GreenPlum 安装方法详解

    一.安装环境准备 1.磁盘环境准备 磁盘分区典型配置如下: 文件系统 文件格式    大小  /        ext3   50GB,Linux系统的根目录,所有的目录都挂在这个目录下面,建议大小为 ...

  3. Leetcode 002-Search Insert Position

    #Given a sorted array and a target value, return the index if the target is found. If not, return th ...

  4. ETF到底是什么？

    ETF(交易所交易基金)是一种证券产品,它可以跟踪一些相关的资产,不论是股票.债券.商品,还是数字货币. ETF基金会负责跟踪指定的资产.然后放出部分股份,这些股份代表着对资产的拥有权. 交易ETF股 ...

  5. /dev/sda2 is mounted; will not make a filesystem here!

    一定要记住,不可以在分区挂载之后再进行格式化!!在错误提示当中可以看出你的分区已经挂载了.先将这个分区卸载了再重新格式化:umount /dev/sda2mkfs.ext2 /dev/sda2这样就没 ...

  6. sdut oj 3058 路线冲突问题（BFS+记录路径算法，回溯路径 ）

    路线冲突问题 题目描述 给出一张地图,地图上有n个点,任意两点之间有且仅有一条路.点的编号从1到n. 现在兵团A要从s1到e1,兵团B要从s2到e2,问两条路线是否会有交点,若有则输出交点个数,否出输 ...

  7. CodeForces - 385E Bear in the Field —— 矩阵快速幂

    题目链接:https://vjudge.net/problem/CodeForces-385E E. Bear in the Field time limit per test 1 second me ...

  8. Codeforces Round #376 (Div. 2) F. Video Cards —— 前缀和 & 后缀和

    题目链接:http://codeforces.com/contest/731/problem/F F. Video Cards time limit per test 1 second memory ...

  9. Codeforces Round #374 (Div. 2) D. Maxim and Array —— 贪心

    题目链接:http://codeforces.com/problemset/problem/721/D D. Maxim and Array time limit per test 2 seconds ...

  10. AndroidManifest配置之uses-sdk

    uses-sdk配置 uses-sdk用来设置app对android系统的兼容性.它包含三个可选的配置项,分别为android:minSdkVersion,android:targetSdkVersi ...