【React】JSX 语法及原理
文章目录
-
- 一、JSX 原理分析
-
- 1.1、案例分析
- 1.2、作用总结
- 二、JSX 语法使用
-
- 2.1、插值表达式
- 2.2、属性绑定
- 2.3、数组渲染
一、JSX 原理分析
- 要明白JSX的原理，需要先明白如何用 JavaScript 对象来表现一个 DOM 元素的结构
<div class='app' id='appRoot'>
<h1 class='title'>欢迎进入React的世界</h1>
<p>
React.js 是一个帮助你构建页面 UI 的库
</p>
</div>
- 上面这个 HTML 所有的信息我们都可以用 JavaScript 对象来表示：
{
tag: 'div',
attrs: { className: 'app', id: 'appRoot'},
children: [
{
tag: 'h1',
attrs: { className: 'title' },
children: ['欢迎进入React的世界']
},
{
tag: 'p',
attrs: null,
children: ['React.js 是一个构建页面 UI 的库']
}
]
}
- 但是用 JavaScript 写起来太长了，结构看起来又不清晰，用 HTML 的方式写起来就方便很多了。
于是 React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component{
render(){
return (
<div className='app' id='appRoot'>
<h1 className='title'>欢迎进入React的世界</h1>
<p>React.js 是一个构建页面 UI 的库</p>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
- 编译之后将得到这样的代码:
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
React.createElement(
"div",
{
className: 'app',
id: 'appRoot'
},
React.createElement(
"h1",
{ className: 'title' },
"欢迎进入React的世界"
),
React.createElement(
"p",
null,
"React.js 是一个构建页面 UI 的库"
)
)
)
}
}
ReactDOM.render(
React.createElement(App),
document.getElementById('root')
)
React.createElement会构建一个 JavaScript 对象来描述你HTML结构的信息，包括标签名、属性、还有子元素等
// 语法：
React.createElement(
type,
[props],
[...children]
)
- 所谓的JSX其实就是JavaScript 对象，所以使用React 和JSX的时候一定要经过编译的过程：
JSX → 使用 React 构造组件，bable 进行编译 → JavaScript 对象 → ReactDOM.render() →DOM元素→插入页面
1.1、案例分析
不用 jsx 语法
- hello world
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="root">div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin>script>
<script>
// 3. 创建react组件
// 获取需要渲染的位置对应的dom
const container = document.getElementById("root");
// 创建具体的渲染内容
// 语法：React.cerateElement(标签名,属性对象,子内容)
// 细节：子内容还支持套娃
// 例如：React.cerateElement(标签名,属性对象,React.cerateElement(标签名,属性对象,内容))
const content = React.createElement("div",{},"hello world")
// 正式渲染组件
// 语法：ReactDOM.render(虚拟dom,挂载点)
ReactDOM.render(content,container);
script>
body>
html>
使用 jsx 语法
- JSX 重构 Hello world
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="root">div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin>script>
<script type="text/babel">
// 3. 创建react组件
// 获取需要渲染的位置对应的dom
const container = document.getElementById("root");
// 创建虚拟节点
// jsx语法就是在js中写html语法
// 针对换行的jsx语法，编辑器在格式化的时候自动加()
// 另外，切记，不要给jsx语法加引号
const vNode=(
<div>
<div>
<div>hello world</div>
</div>
</div>
);
ReactDOM.render(vNode,container);
script>
body>
html>
1.2、作用总结
由于通过 React.createElement() 方法创建的React元素有一些问题：
- 代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时代码很不友好
React 使用 JSX 来替代常规的 JavaScript ， JSX 可以理解为 JavaScript 语法扩展。
他里面的标签申明要符号 XML 规范要求（必须要有一个唯一的根元素）
在写jsx语法的时候需要注意，如果对应dom有多个层次，建议给整体添加小括号。
这样的话允许通过格式化插件将代码格式化成多行，有助于清晰的看清dom的层次结构
- React 不一定非要使用 JSX
- 但是他有以下的优点
1. JSX 执行更快，因为他在编译为 JavaScript代码后进行了优化
2. 它的类型安全，在编译过程中就能发现错误
3. 声明式语法更加直观，与HTML结构相同，降低了学习成本，提升开发效率
4. JSX 语法中一定要有一个 顶级元素包裹（XML一大特性，否则编译报错，程序不能运行）
二、JSX 语法使用
2.1、插值表达式
- 在 JSX 语法中，要用 JS 代码写到{ }中，所有标签必须闭合
- 注意：在 jsx 语法中不支持
//注释形式以及注释形式，只能使用{/* */}注释形式。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="root">div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin>script>
<script type="text/babel">
let bool = true;
let num1 = 15;
let num2 = 29;
let msg = '一段文本内容';
// 1. 获取挂载点
const el = document.getElementById("root");
// 2. jsx语法
const vNode=(
<div>
{/*注释写法*/}
<div>直接插值：{msg}</div>
<div>三元运算：{bool ? 'yes':'no'}</div>
<div>js表达式：{num1 +num2}</div>
<div></div>
</div>
);
// 3. 渲染
ReactDOM.render(vNode,el);
script>
body>
html>
- 运行结果：
2.2、属性绑定
- 相当于：Vue2的
v-bind指令
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="root">div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin>script>
<script type="text/babel">
// 数据初始化
let url = "https://www.baidu.com";
let style = {color:'red',backgroung:'black'};
let content = '百度';
// 1. 获取dom
const el = document.getElementById("root");
// 2. 产生dom
const vNode=(
<div>
<div>给a标签绑定一个ls地址：<a href={url}>百度</a></div>
<div style={style}>给div绑定style</div>
<div dangerouslySetInnerHTML={{__html:content}}></div>
</div>
);
// 3. 渲染
ReactDOM.render(vNode,el);
script>
body>
html>
- 运行结果：
需要注意，在 react 中，JavaScript 代码部分里面如果涉及到 DOM 的 class 属性操作，请不要直接使用
class，原因是这个class是 es6 里面的关键词，react里面需要使用className进行替换。
<div className={cls}>div>
2.3、数组渲染
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div id="root">div>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin>script>
<script type="text/babel">
// 准备一个数组
let arr = ['a','b','c','d'];
// 获取dom
const el = document.getElementById("root");
// 产生虚拟dom
const vNode=(
<div>
<div></div>
{/*第一种循环方式（了解）：直接循环*/}
{arr}
<hr/>
{/*第二种循环方式（常用）：通过js的api循环*/}
<ul>
{
arr.map((item,index) => {
return <li key={index}>{item}</li>
}
)
}
</ul>
</div>
);
// 3. 渲染
ReactDOM.render(vNode,el);
script>
body>
html>
- 运行结果：
- 注意：
上面的 map() 不能用 forEach() 代替：
因为 forEach()返回的是 undefined，map()返回的是一个新数组
总结：在jsx语法中循环不能使用 forEach() 和 for()