一.虚拟DOM

  React 原理

  1. 存放 state 数据

  2. JSX 模版

  3. 数据 + 模版 生成虚拟DOM(虚拟DOM就是一个JS 对象, 用来描述真实DOM)

  eg: ['div', {id:'abc'}, ['span', {}, 'hello world']]

  4. 用虚拟DOM的结构生成真实的DOM, 来显示

  eg: <div id='abc'><span>hello word</span></div>

  5. state 发生变化

  eg: <div id='abc'><span>bye bye</span></div>

  6. 数据 + 模版 结合生成 虚拟DOM(虚拟DOM就是一个JS 对象, 用来描述真实DOM)

  eg: ['div', {id:'abc'}, ['span', {}, 'bye bye']]

  7. 比较原始虚拟DOM 和 新的虚拟DOM 的区别, 找到区别的span内容

  8. 直接操作DOM, 改变 span 中的内容

二. 深入了解虚拟DOM

  render 方法内

    返回 JSX 语法 与 返回 React.createElement() 方法所生成的效果是一样的

    eg: 下面两种产生的效果相同

      JSX:

        return <div><span>div span</span></div>

      React.createElement:

        return React.createElement('div', {}, React.createElement('span', {}, 'div span'))

  虚拟DOM 可以理解为

    将 JSX  转化为  createElement 对象  再转化为  虚拟DOM(js 对象)  再转化为 真实的DOM

  虚拟DOM 带来的好处

    1.性能提升 (DOM 比对 编程 js 比对)

    2.他使得跨端应用得以实现 (React Native, 再网页中 将虚拟 DOM 转化为组件,再App中将 虚拟DOM 转化为 app 组件, 使得 React 开发变得简介)

三. 虚拟DOM 中的 Diff (diffrence) 算法  (虚拟 DOM 的 比对方式)

  调用 setState 时 会运行 Diff 算法

  同级比较

    先比较顶层 DOM

      如果 顶层有差异 (替换全部的DOM)

  使用 稳定的 key 值 做 标记 便于 虚拟DOM 比对

9 react 基础 - 虚拟DOM的更多相关文章

  1. React的虚拟DOM

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

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

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

  3. react 的虚拟dom

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

  4. React:关于虚拟DOM(Virtual DOM)

    Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象. React 使用 Virtual DOM 来渲染 UI,当组件状态 state 有更改的时候,React 会自动调用组件 ...

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

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

  6. 2.ReactJS基础(虚拟DOM,JSX语法)

    将脚手架(create-react-app)创建的todolist项目精简为hello world示例 即,删除自动生成的样式文件.logo.svt.App.test.js.serviceWorker ...

  7. react中虚拟dom的diff算法

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

  8. react中虚拟DOM的基本概念

    react中的核心概念 1.DOM的本质是什么: 浏览器中的概念,用js对象来表示页面上的元素,并提供操作DOM对象的API 2.什么事react中的虚拟DOM:是框架中的概念,是程序员用js对象来模 ...

  9. React virtual DOM explained in simple English/简单语言解释React的虚拟DOM

    初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...

随机推荐

  1. python 聚类分析 k均值算法

    dataSet = [ #数据集 # 1 [0.697, 0.460], # 2 [0.774, 0.376], # 3 [0.634, 0.264], # 4 [0.608, 0.318], # 5 ...

  2. R 对数变换 《回归分析与线性统计模型》page103

    BG:在box-cox变换中,当λ = 0时即为对数变换. 当所分析变量的标准差相对于均值而言比较大时,这种变换特别有用.对数据作对数变换常常起到降低数据波动性和减少不对称性的作用..这一变换也能有效 ...

  3. JS浮点数的研究

    为什么0.1 + 0.2 得到的是 0.30000000000000004 console.log( 0.1 + 0.2 == 0.3);//false 在js中所有的整数和小数都是以Number形式 ...

  4. 046、Java中使用if…else判断

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  5. dataGridView与数据源dataTable同步排序

    private void dataGridView1_Sorted(object sender, EventArgs e)         {             string _sortStr ...

  6. DevOps - 与传统方式区别

    章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...

  7. 洛谷 P3133 [USACO16JAN]Radio Contact G

    题目传送门 解题思路: f[i][j]表示FJ走了i步,Bessie走了j步的最小消耗值.方程比较好推. 横纵坐标要搞清楚,因为这东西WA了半小时. AC代码: #include<iostrea ...

  8. 概率图模型之EM算法

    一.EM算法概述 EM算法(Expectation Maximization Algorithm,期望极大算法)是一种迭代算法,用于求解含有隐变量的概率模型参数的极大似然估计(MLE)或极大后验概率估 ...

  9. Reference在Essay写作中的最佳占比是多少?

    很多同学在写完Essay作业后 就觉得大功告成了 并不是很注重参考文献 导致查重率过高 面临抄袭.取消成绩. 甚至被退学的情况 或者在essay写作中勉强标出几处 非常随意的在后面列出 其实这是很不正 ...

  10. 《thinkphp》二、创建实例

    1.目录结构 project 应用部署目录 ├─application 应用目录(可设置) │ ├─common 公共模块目录(可更改) │ ├─index 模块目录(可更改) │ │ ├─confi ...