一.虚拟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. android:imeOptions

    转自:http://www.cnblogs.com/qiengo/archive/2012/05/03/2480857.html 默认情况下软键盘右下角的按钮为“下一个”,点击会到下一个输入框,保持软 ...

  2. 富文本API

    这个笔记来自网络资料的总结 简书大佬三省吾身_9862 tuobaye个人博客 富文本有相关3个API和一个新属性 var selection = window.getSelection(); var ...

  3. Day7 - E - Strange Way to Express Integers POJ - 2891

    Elina is reading a book written by Rujia Liu, which introduces a strange way to express non-negative ...

  4. POJ 1961:Period

    Period Time Limit: 3000MS Memory Limit: 30000K Total Submissions: 14280 Accepted: 6773 Description F ...

  5. C++面试常见问题——03String类的实现

    String类的具体实现 string的内容其实就是C中的字符串,在C中是char*型,在C++中是string类型. //C char *str = "mengziyue"; / ...

  6. [题解] LuoguP6075 [JSOI2015]子集选取

    传送门 ps: 下面\(n\)和\(k\)好像和题目里的写反了...将就着看吧\(qwq\) 暴力打个表答案就出来了? 先写个结论,答案就是\(2^{nk}\). 为啥呢? 首先你需要知道,因为一个集 ...

  7. 实验吧-隐写术-男神一般都很低调很低调的!!(stegsolve->Image Combiner + DES加密)

    先介绍一下DES加密:(也可参考https://blog.csdn.net/zz_Caleb/article/details/87016017,第14个) 1)对称加密,参考:对称加密和非对称加密 2 ...

  8. case...when...和decode——oracle

    1.decode函数: 用法:decode(条件,值1,翻译1,值2,翻译2,......,缺省值): 例子: ','失败','未知') from table t1;--改变字段的显示值 ,变量1,变 ...

  9. cf 1241 D. Sequence Sorting(思维)

    题意: 一个序列有n个数,有一种操作,你可以选一个数x,使这个序列中等于x的数都移到序列头或尾. 问最少几次操作后,可以使这个序列非降序. 思路: (以下说bi移动到哪里,其实就是指a1……an中等于 ...

  10. vue 父子传值,子页面没有实时刷新的问题

    在做高德地图的时候,发现列表点击编辑的时候,地图不能实时更新: <el-form-item label="门店坐标:" :label-width="formLabe ...