[react] 虚拟DOM和真实DOM比较 JSX语法

文章目录

  • Hello React
    • 相关库介绍
      • 【补充】babel.js的作用
    • 使用JSX创建虚拟DOM
    • 渲染虚拟DOM(元素)
    • 页面显示
  • 创建虚拟DOM的两种方式
    • 纯JS方式(一般不用)
    • JSX方式
  • 虚拟DOM与真实DOM
  • JSX入门
    • 概述
    • 基本语法规则
      • 1. 定义虚拟DOM时,不要写引号。
      • 2. 标签中混入JS表达式时要用 { }。
      • 3. 样式的类名指定不要用 class,要用 className。
      • 4. 内联样式,要用 style={{ key:value }} 的形式去写。
      • 5. 只有一个根标签
      • 6. 标签必须闭合
      • 7. 标签首字母
      • 8. 给React一个数组,他可以帮你遍历
      • 9.label中的for不能直接使用,得用htmlFor
      • 10. 不转义 dangerouslySetInnerHTML
    • 【补充】 区分js表达式与js语句
        • 小小小demo
    • 总结

Hello React

相关库介绍

旧版本 16.8.4 (March 5, 2019)
新版本 有不一样的会说明

react.js:React核心库。
react-dom.js:提供操作DOM的React扩展库。
babel.min.js:解析JSX语法代码转为JS代码的库。

【补充】babel.js的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX,都要加上type=“text/babel”, 声明需要babel来处理

使用JSX创建虚拟DOM

const VDOM = <h1>Hello,React</h1>

渲染虚拟DOM(元素)

  1. 语法: ReactDOM.render(virtualDOM, containerDOM)

  2. 作用:将虚拟DOM元素渲染到页面中的真实容器DOM中显示

  3. 参数说明

    参数一: 纯js或jsx创建的虚拟dom对象
    参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>hello_reacttitle>
head>

<body>
  
  <div id="test">div>

  
  <script type="text/javascript" src="../js/react.development.js">script>
  
  <script type="text/javascript" src="../js/react-dom.development.js">script>
  
  <script type="text/javascript" src="../js/babel.min.js">script>

  <script type="text/babel"> /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号,因为不是字符串 */
		
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	script>
body>

html>

页面显示

[react] 虚拟DOM和真实DOM比较 JSX语法_第1张图片

创建虚拟DOM的两种方式

纯JS方式(一般不用)

<div id="test">div>

<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>

<script type="text/javascript" > 
	//1.创建虚拟DOM
	const VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
script>

JSX方式

JSX方式就是js创建虚拟DOM的语法糖

<div id="test">div>

<script type="text/javascript" src="../js/react.development.js">script>
<script type="text/javascript" src="../js/react-dom.development.js">script>
<script type="text/javascript" src="../js/babel.min.js">script>

<script type="text/babel" > /* 此处一定要写babel */
	//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号,因为不是字符串 */
		<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
	//2.渲染虚拟DOM到页面
	ReactDOM.render(VDOM,document.getElementById('test'))
script>

[react] 虚拟DOM和真实DOM比较 JSX语法_第2张图片

虚拟DOM与真实DOM

打印输出虚拟DOM和真实DOM进行比较

const VDOM = (  /* 此处一定不要写引号,因为不是字符串 */
	<h1 id="title">
		<span>Hello,React</span>
	</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.getElementById('test'))

const TDOM = document.getElementById('demo')
console.log('虚拟DOM',VDOM);
console.log('真实DOM',TDOM);
debugger;

[react] 虚拟DOM和真实DOM比较 JSX语法_第3张图片

[react] 虚拟DOM和真实DOM比较 JSX语法_第4张图片

[react] 虚拟DOM和真实DOM比较 JSX语法_第5张图片

  1. 虚拟DOM本质是Object类型的对象(一般对象)
  2. 虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM上那么多的属性
  3. 虚拟DOM最终会被React转化为真实DOM,呈现在页面上

JSX入门

概述

  1. 全称: JavaScript XML
  2. React定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component, props, …children)方法的语法糖
  3. 作用: 用来简化创建虚拟DOM
    1. 写法:var ele =

      Hello JSX!

    2. 注意1:它不是字符串, 也不是HTML/XML标签
    3. 注意2:它最终产生的就是一个JS对象
  4. 标签名任意: HTML标签或其它标签
  5. 标签属性任意: HTML标签属性或其它

基本语法规则

1. 定义虚拟DOM时,不要写引号。

[react] 虚拟DOM和真实DOM比较 JSX语法_第6张图片

2. 标签中混入JS表达式时要用 { }。

[react] 虚拟DOM和真实DOM比较 JSX语法_第7张图片

3. 样式的类名指定不要用 class,要用 className。

(因为class是ES6中类的关键字,所以不让用)
[react] 虚拟DOM和真实DOM比较 JSX语法_第8张图片

4. 内联样式,要用 style={{ key:value }} 的形式去写。

[react] 虚拟DOM和真实DOM比较 JSX语法_第9张图片
[react] 虚拟DOM和真实DOM比较 JSX语法_第10张图片

5. 只有一个根标签

[react] 虚拟DOM和真实DOM比较 JSX语法_第11张图片

6. 标签必须闭合

[react] 虚拟DOM和真实DOM比较 JSX语法_第12张图片
[react] 虚拟DOM和真实DOM比较 JSX语法_第13张图片

7. 标签首字母

(1). 若小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
(2). 若大写字母开头,React就去渲染对应的组件,若组件没有定义,则报错。

8. 给React一个数组,他可以帮你遍历

[react] 虚拟DOM和真实DOM比较 JSX语法_第14张图片
给React一个对象,遍历不了,报错
[react] 虚拟DOM和真实DOM比较 JSX语法_第15张图片
在这里插入图片描述

在这里插入图片描述

9.label中的for不能直接使用,得用htmlFor

[react] 虚拟DOM和真实DOM比较 JSX语法_第16张图片

10. 不转义 dangerouslySetInnerHTML

在这里插入图片描述

在这里插入图片描述

【补充】 区分js表达式与js语句

[react] 虚拟DOM和真实DOM比较 JSX语法_第17张图片

  1. 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方
    下面这些都是表达式:
    (1)a
    在这里插入图片描述
    (2) a+b
    (3) demo(1)// 函数调用表达式
    (4)arr.map()
    在这里插入图片描述
    (5) function test () {}
    在这里插入图片描述
    在这里插入图片描述

  2. 语句(代码):
    下面这些都是语句(代码):
    (1)if(){ }
    (2) for(){ }
    (3)switch( ){case:xxxx}

小小小demo

[react] 虚拟DOM和真实DOM比较 JSX语法_第18张图片
效果:
[react] 虚拟DOM和真实DOM比较 JSX语法_第19张图片

总结

遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以{开头的代码,以JS语法解析: 标签中的js表达式必须用{ }包含







参考:
【React】入门概述 - 虚拟DOM与原生DOM - JSX语法 - React基本使用

你可能感兴趣的:(#,react,react)