【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>Document</title>
</head>
<body><!-- 步骤：1. 创建渲染容器2. 引入相关的外部js文件3. 创建react组件--><!-- 1. 创建渲染容器 --><div id="root"></div><!-- 2. 引入需要的外部js文件，注意文件的先后顺序先react.js 后react-dom.js--><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组件// 获取需要渲染的位置对应的domconst 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>Document</title>
</head>
<body><!-- 步骤：1. 创建渲染容器2. 引入相关的外部js文件3. 创建react组件JSX语法使用的要求：1. 需要在原基础上，引入一个babel的js文件2. 并且该文件的导入要在react的两个文件之前3. 之所以导入babel，原因是浏览器不认识jsx语法4. 需要babel.js将jsx语法转化为浏览器认识的语法5. 如果我们希望某个script标签被babel解析，需要给script标签加上 type="text/babel"--><!-- 1. 创建渲染容器 --><div id="root"></div><!-- 2. 引入需要的外部js文件，注意文件的先后顺序babel.min.js（要在最前）然后react.js 最后react-dom.js--><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组件// 获取需要渲染的位置对应的domconst 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>Document</title>
</head>
<body><!-- 插值表达式：1. 含义与vue中概念是一样的2. 常见的支持：直接输出支持三元3. 不要把vue的习惯带过来，vue插值是双层大括号，react的插值是单层大括号注意点：在jsx语法中，不支持“HTML”简括号形式的注释，也不支持“js”双斜杠形式的注释，其注释形式只有“{/* 注释内容 */}”--><div id="root"></div><!-- 引入需要的外部js文件，注意文件的先后顺序，不能变--><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>Document</title>
</head>
<body><!-- 属性绑定：1. 在react中没有类似vue中的v-bind的语法糖2. 动态属性绑定，react插值要求不能给属性值加引号，加了就不解析3. 在属性值的位置直接使用插值表达式：4. 对于html内容，不能使用插值，如果需要解析则必须通过属性绑定，绑定dangerouslySetInnerHTML={{__html:content}},直接输出html内容比较危险，存在xss攻击--><div id="root"></div><!-- 引入需要的外部js文件，注意文件的先后顺序--><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 = '<a href="https://www.baidu.com">百度</a>';// 1. 获取domconst el = document.getElementById("root");// 2. 产生domconst 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>Document</title>
</head>
<body><!-- 循环操作：1. 循环操作在react中支持两种写法直接循环：基本不用（没有办法对数据显示效果解析处理，有种数组元素拼接在一起形成字符串的感觉）循环并处理：经常使用（推荐）2. 在写循环的时候，注意代码的分割，通过大括号对分割3. 在循环的时候，每个子元素必须有一个唯一的key属性--><div id="root"></div><!-- 2. 引入需要的外部js文件，注意文件的先后顺序先react.js 后react-dom.js--><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'];// 获取domconst el = document.getElementById("root");// 产生虚拟domconst 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()

【React】JSX 语法及原理相关推荐

React jsx语法学习
目录 1. 需要准备的三个文件 2. jsx 和 js 创建虚拟DOM 的区别 3. jsx语法 (1)创建虚拟DOM不要加引号 (2)使用js定义的变量 (3)使用calss类名 (4)使用styl ...
22-React JSX语法
React JSX语法 JSX只是一个语法糖,每一个XML标签都会被JSX转换工具转换成纯Javascript代码,当然你想直接使用纯Javascript代码写也是可以的,只是利用JSX,组件的结构和 ...
jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
React框架简介（JSX语法、组件、虚拟DOM渲染）
目录 React框架为什么要学习React React特点 React核心 JSX语法语法详解 React开发过程实际DOM 虚拟DOM React组件函数组件类组件虚拟DOM渲染过程 R ...
React（2）认识JSX语法格式
文章目录前言一.JSX语法的基本用法 1.使用变量定义JSX元素 2.使用变量定义嵌套的JSX元素 3.在JSX元素中使用变量 4.在JSX元素中调用函数二.JSX元素的语法规定三.在JSX格 ...
React学习（1）——JSX语法与React组件
为什么80%的码农都做不了架构师?>>> 本文记录了在官网学习如何使用JSX+ES6开发React的过程. 全文共分为3篇内容: JSX语法与React组件状态.事件与动态渲 ...
React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期
React简介: 前面只是简单介绍移动APP开发,后面还会继续深入介绍移动app开发:其中想要用ReactNative开发出更出色的应用,那么就得学好React,下面将介绍React: React 是 ...
react 注释html,React之JSX语法
React发明了JSX,利用HTML语法来创建虚拟DOM.React的核心机制之一就是可以在内存中创建虚拟的DOM元素.以此来减少对实际DOM的操作从而提升性能. JSX 即Javascript XM ...
React学习笔记一 JSX语法组件
JSX语法 1.标签不能添加引号,换行用括号包裹,并且只有一个根标签 const H1 = <h1>标题</h1> const Div = (<div><h1 ...
React基础-JSX语法介绍
文章目录 JSX语法介绍认识JSX语法 JSX注释编写 JSX语法介绍认识JSX语法我们先来看一段代码 // 定义根组件 const element = <div>Hello Wor ...

【React】JSX 语法及原理

文章目录

一、JSX 原理分析

1.1、案例分析

1.2、作用总结

二、JSX 语法使用

2.1、插值表达式

2.2、属性绑定

2.3、数组渲染

【React】JSX 语法及原理相关推荐

最新文章

热门文章