2.ReactJS基础(虚拟DOM,JSX语法)
将脚手架(create-react-app)创建的todolist项目精简为hello world示例
即，删除自动生成的样式文件、logo.svt、App.test.js、serviceWorker.js等文件，并精简App.js和index.js里的代码，结果如下：
npm run start 后，浏览器界面仅显示纯文本 Hello world !
一，虚拟DOM
首先，看一段html片段
<div id="container">
<p>这里是p标签里的文本节点</p>
<ul>
<li class="item">这里是li标签里的文本节点</li>
<li class="item">这里是li标签里的文本节点</li>
<li class="item">这里是li标签里的文本节点</li>
</ul>
</div>
上面的html片段会最终生成为DOM对象，并由浏览器渲染到页面上。
而虚拟DOM,就是用一个JS对象模拟上面的DOM元素和结构：
['div', { id: 'container' }, [
['p', {}, '这里是p标签里的文本节点'],
['ul', {},[
['li', { class: 'item' }, '这里是li标签里的文本节点'],
['li', { class: 'item' }, '这里是li标签里的文本节点'],
['li', { class: 'item' }, '这里是li标签里的文本节点']
]
]
]
]
这里用伪代码进行了模拟。虚拟DOM和真实DOM都是js对象。
为何引入虚拟DOM？因为操作真实DOM耗性能。而DOM操作影响性能，最主要的原因就是因为它导致了浏览器的重绘（repaint）和重排（reflow）。
浏览器渲染原理简单描述：浏览器下载到html文档后，会解析文档的结构来构建DOM树；解析css文件，产生css规则树；然后根据DOM树和css规则树构建出渲染 树；最后渲染到浏览器界面上。
每一次的DOM操作(element.style.borderColor = '#f00';),都会触发页面的重绘或重排。
但是如果换成操作虚拟DOM，假设操作ul下的li标签,添加1000个li标签并设置内容颜色，对于上面模拟的对象来说完全是在内存中完成，性能损耗几乎不计。
操作完虚拟DOM后，再映射为真实DOM，交给浏览器渲染，这样性能损耗就只是替换映射这个环节以及渲染一次的过程了。
以上只是对虚拟DOM的简单描述，总之，虚拟DOM的目的是将所有操作累加起来，统一计算(Diff算法)出所有的变化后，统一更新一次DOM。
二、ReactJS中的JSX语法
JSX全称 JavaScript XML
其实就是对js语法进行了扩展，可以在js代码中写xml标签
作用：用来创建虚拟DOM对象。
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
Hello world !
</div>
);
}
}
export default App;
例如，App.js中，App组件（react中，继承了Component的类，就是一个组件）中的render方法就是返回了一个虚拟DOM对象。return(<div>Hello world ！</div>)中的div并不是虚拟DOM对象，它只是JSX语法，React会最终将其生成一个虚拟DOM对象。
将App.js中的代码做如下修改：
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<Test1/>
<Test2/>
Hello world !
</div>
);
}
}
class Test1 extends Component {
render() {
return (
<div>
Test1
</div>
);
}
}
class Test2 extends Component {
render() {
return (
<div>
Test2
</div>
);
}
}
export default App;
此时浏览器显示结果为：
在App组件中包含了两个子组件Test1和Test2,
可以简单地理解为App组件生成的虚拟DOM是由多个‘子虚拟DOM’组成，最后会将这个大的虚拟DOM映射成真实DOM，由浏览器渲染到页面上。（挂载到id=root的节点上）
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
2.ReactJS基础(虚拟DOM,JSX语法)的更多相关文章
- 9 react 基础 - 虚拟DOM
一.虚拟DOM React 原理 1. 存放 state 数据 2. JSX 模版 3. 数据 + 模版 生成虚拟DOM(虚拟DOM就是一个JS 对象, 用来描述真实DOM) eg: ['div', ...
- JSX语法简介
React的核心机制之一就是可以在内存中创建虚拟的DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. JSX简介 JSX就是Javascript和XML结合的一种格式.Reac ...
- React/虚拟DOM
在说虚拟DOM之前,先来一个引子,从输入url到展现出整个页面都有哪些过程? 1.输入网址 2.DNS解析 3.建立tcp连接 4.客户端发送HTPP请求 5.服务器处理请求 6.服务器响应请求 7. ...
- react通过自己的jsx语法将两者放在一起通过虚拟dom来渲染
目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...
- React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...
- 【原创】React实例入门教程(1)基础API,JSX语法--hello world
前 言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发效率 ...
- React入门-JSX和虚拟dom
1.JSX理解 举例: const element = <h1>Hello, world!</h1>; 这被称为 JSX,是一个 JavaScript 的语法扩展.建议在 Re ...
- 深刻理解 React (一) ——JSX和虚拟DOM
版权声明:本文由左明原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/155 来源:腾云阁 https://www.qclou ...
- react入门-----（jsx语法，在react中获取真实的dom节点）
1.jsx语法 var names = ['Alice', 'Emily', 'Kate']; <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的 ...
随机推荐
- 通过编写一个简单的日志类库来加深了解C#的文件访问控制
在程序的开发调试过程及发布运行后的状态监控中,日志都有着极其重要的分量,通过在关键逻辑节点将关键数据记录到日志文件当中能帮助我们尽快找到程序问题所在.网上有不少专业成熟的日志组件可用,比如log4ne ...
- 第二课 ---git时光穿梭（版本回退）
1. git status 掌握仓库当前的状态. 2. git diff 查看修改的内容部分. //版本回退: 1.查看更新的历史记录. git log git log --pretty=o ...
- 路由导航之第一个子模块（HomeModule）
git clone git@github.com:len007/my-angular2-app.git my-angular2-app 开始 一个URL = 一个页面 = 一个Component. 我 ...
- MATLAB绘图hist
刚登上号,已经学了一半了,就从现在开始写吧 以前学过的东西老忘,所以就注册个账号就当做记笔记吧 MATLAB在原来的数组中增加新行 A=[A;B]%B是要增加的行: hist使用方法 y=4*rand ...
- 使用labelme制作自己的数据集
# python3 conda create --name=labelme python=3.6 source activate labelme # conda install -c conda-fo ...
- Java中的静态和枚举
一.静态成员 对静态成员最简单的解释,静态成员属于整个类而不属于某个对象,所以又叫做类变量.一个类不管创建多少个实例对象,静态变量在内存中有且只有一个(调用方法用类名调用). 通常的非静态变量称为实例 ...
- CEPH集群操作入门--配置
参考文档:CEPH官网集群操作文档 概述 Ceph存储集群是所有Ceph部署的基础. 基于RADOS,Ceph存储集群由两种类型的守护进程组成:Ceph OSD守护进程(OSD)将数据作为对象 ...
- spring boot hello world
本文讲解初始用户搭建spring boot 工程. 新建工程目录结构: application.java放在最外层的包目录里 先添加pom.xml的依赖包: <project xmlns=&qu ...
- 【一：定义】python 简介
[python基础介绍的比较好的link] https://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac927076 ...
- spring不走注解的原因
在配置文件中没有扫描配置注解的类,导致自定义的注解无法被识别,所以不会走,检查配置文件,修改即可