9 react 基础 - 虚拟DOM
一.虚拟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的更多相关文章
- React的虚拟DOM
ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...
- 【React自制全家桶】二、分析React的虚拟DOM和Diff算法
一.React如何更新DOM内容: 1. 获取state 数据 2. 获取JSX模版 3. 通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...
- react 的虚拟dom
前端优化的主要方面就是减少页面的DOM操作,减少重排和重绘,React在这方面做了优化,采用了所谓的虚拟DOM,其实我们平时也会遇到虚拟DOM,只是你没有注意罢了,请听我娓娓道来. 所谓的虚拟DOM ...
- React:关于虚拟DOM(Virtual DOM)
Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象. React 使用 Virtual DOM 来渲染 UI,当组件状态 state 有更改的时候,React 会自动调用组件 ...
- JavaScript是如何工作的:编写自己的Web开发框架 + React及其虚拟DOM原理
这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...
- 2.ReactJS基础(虚拟DOM,JSX语法)
将脚手架(create-react-app)创建的todolist项目精简为hello world示例 即,删除自动生成的样式文件.logo.svt.App.test.js.serviceWorker ...
- react中虚拟dom的diff算法
.state 数据 .jsx模板 .生成虚拟dom(虚拟DOM就是一个js对象,用它来描述真实DOM) ['div', {id:'abc'}, ['span', {}, 'hello world']] ...
- react中虚拟DOM的基本概念
react中的核心概念 1.DOM的本质是什么: 浏览器中的概念,用js对象来表示页面上的元素,并提供操作DOM对象的API 2.什么事react中的虚拟DOM:是框架中的概念,是程序员用js对象来模 ...
- React virtual DOM explained in simple English/简单语言解释React的虚拟DOM
初学React,其中一个很重要的概念是虚拟DOM,看了一篇文章,顺带翻译一下. If you are using React or learning React, you must have hear ...
随机推荐
- Oralce给字段追加字符,以及oracle 给字段替换字符
追加字符 update table_name t set t.DIST_NAME = t.DIST_NAME || '市' where PROD_NAME='爱立信' table_name :表名 ...
- java实现下划线转驼峰
废话少说,直接上代码 import java.util.regex.Matcher; import java.util.regex.Pattern; public class Temp { publi ...
- 使用vue框架开发前端项目的步骤
前端项目的开发 1. 本地安装nodejs https://nodejs.org/en/download/ 2. 测试安装 > node -v 3. 本地安装git > git --ver ...
- PHP处理大数据量老用户头像更新的操作--解决数据量大超时的问题
/** * @title 老用户头像更新--每3秒调用一次接口,每次更新10条数据 * @example user/createHeadPicForOldUser? * @method GET * @ ...
- 7.6 CLI 管理Varnish
./varnishd -f /usr/common/varnish/etc/varnish/ -a 测试: 代理tomcat服务器地址:http://172.20.10.5:1111/ telnet ...
- Django(七)模型:字段属性、字段选项(参数)
一.模型类属性命名限制 参考:https://docs.djangoproject.com/zh-hans/3.0/topics/db/models/ 1)不能是python的保留关键字. 2)不允许 ...
- 使用pip install jupyter报错处理办法及修改Jupyter默认加载路径的方法
1.配置python环境之后想使用Jupyter,网上查看可以使用pip install Jupyter安装,执行命令行后正常安装,安装到一半以后报错,如图1.2 图1 图2 2.发现是安装过程中安装 ...
- Flask—路由的注册方法
第一种注册方法 from flask import Flask app = Flask(__name__) @app.route("/hello") # 第一种注册方法 def h ...
- 053-switch分支结构
<?php $week=3; //定义并初始化星期变量 switch($week){ case 0: //变量为0的情况 echo '星期日.'; break; case 1: //变量为1的情 ...
- pycharm 配置 github 版本控制 VCS
场景:github上没有repository,将pycharm中的工程push到github 1.在pycharm中登录github 2.新建工程后,选择“share project on githu ...