web前端高级React - React从入门到进阶之JSX简介

Myth丶恋晨 2023-01-02 11:28 102阅读 0赞

### 系列文章目录 ###

[第一章：React从入门到进阶之初识React][React_React]  
[第二章：React从入门到进阶之JSX简介][React_JSX]  
[第三章：React从入门到进阶之元素渲染][React]  
[第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤][React_JSX_DOM_DOM]  
[第五章：React从入门到进阶之组件化开发及Props属性传值][React_Props]  
[第六章：React从入门到进阶之state及组件的生命周期][React_state]  
[第七章：React从入门到进阶之React事件处理][React_state]

### 文章目录 ###

*   *   *  系列文章目录
         *  一、JSX是什么？
         *  二、为什么使用JSX
         *  三、在JSX中嵌入表达式
         *  四、JSX 特定属性
         *  五、使用 JSX 指定子元素
         *  六、JSX 防止注入攻击
         *  七、JSX表示对象
         *  八、本章小结

### 一、JSX是什么？ ###

> 开篇之前，先来看一段代码
> 
>     const element = <h1>Hello, world!</h1>;
> 
> 仔细看上面这段代码，说它是html但却不是html但却用了html的标签，说它是字符串却既没有单引号也没有双引号，所以它也不是字符串。  
> 这段有趣的代码就被称为JSX，它是一个JavaScript的语法扩展，全拼是JavaScript and Xml。  
> 我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

### 二、为什么使用JSX ###

>  *  React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。
>  *  React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合代码片段中，来实现关注点分离。我们将在后面章节中深入学习组件。
>  *  React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。  
>     搞清楚这个问题后，我们就开始学习 JSX 吧！

### 三、在JSX中嵌入表达式 ###

> 首先还是先来看一段JSX代码
> 
>     const name = "Alvin"
>     const element = <h1>Hello, { name}</h1>;
>     ReactDOM.render(
>     	element,
>     	document.getElementId('root')
>     );
> 
>  *  在上面代码中，我们声明了名为name的变量，然后在JSX中使用了它。这里要注意的是，我们在JSX中引入的name是用大括号包裹起来的。这是JSX的语法要求，如果要使用一些变量则必须要使用大括号包裹起来。
>  *  在JSX语法中我们可以在大括号内放置任何有效的JavaScript表达式。比如：2+2，user.firstName或formatName(user)都是有效的JavaScript表达式
>  *  虽然说JSX可以通过大括号包裹来使用JavaScript表达式，但是除了一些特殊情况外，在大括号中是不能直接使用对象的，比如我们想在JSX语法中使用\{ **\{name:“Alvin”**\}\}，这种语法是不被允许的，会直接抛出错误
> 
>     const element = <h1>Hello, { { name:"Alvin"}}</h1>//这种语法不被允许，会直接报错
> 
>  *  但是在一些特殊情况下，还必须得使用对象，比如，如果我们想在标签内使用行内样式style=“XXX”，大括号内包裹的必须是一个对象，否则会直接报语法错误
> 
>     const element = <h1 style={ { color:'red'}}>Alvin</h1>
> 
>  *  在JSX语法中，大括号内除了可以嵌入JavaScript变量，对象的属性以外，还可以直接将函数调用嵌入到大括号中,需要注意的是函数必须要有返回结果
> 
>     let user = { 
>     	firstName: 'Alvin',
>     	lastName: 'Li'	
>     };
>     function getFullName(user){ 
>      return user.firstName + ' ' + user.lastName;
>     }
>     const element = <h1>Hello, { formatName(user)}</h1>!
>     ReactDOM.render(
>     	element,
>     	document.getElementById('root') 	
>     )

### 四、JSX 特定属性 ###

>  *  在JSX语法中，我们可以给标签元素添加自定义属性，其属性值可以是引号引起来的字符串，也可以是大括号包起来的JavaScript表达式
>  *  在属性中嵌入JavaScript表达式时，对于同一个属性不能同时既使用引号又使用大括号，即在同一属性中只能使用引号（对于字符串值）或大括号（对于表达式）中的一个。如果在大括号外面又包了一层引号是不被允许的
> 
>     const element = <div tabIndex="0"></div>
>     const img = <img src={ user.photo}></img>
> 
>  *  另外：因为JSX语法上更接近JavaScript而不是HTML，所以ReactDOM使用的是驼峰式（camelCase）命名来定义属性名称。例如：JSX里的class变成了className，而tabindex则变成了tabIndex。

### 五、使用 JSX 指定子元素 ###

>  *  在JSX中，如果标签内没有内容我们可以使用单闭合标签
>  *  当然JSX的标签中还可以包含多层嵌套的后代标签，这时就需要使用双闭合标签了
> 
>     const element  = <img src={ user.photo} /> //单闭合标签
>     //双闭合标签
>     const body = <div>
>     	<h1>Hello</h1>
>     	<h2>Good morning world</h2>	
>     </div>

### 六、JSX 防止注入攻击 ###

> 在JSX中我们可以放心的使用用户输入的内容，因为ReactDOM在渲染所有输入内容之前，默认会进行转义。它可以确保在应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都会被转成字符串。这样可以有效的方式XSS攻击
> 
>     const element = "<script>alert('hahahha')</script>"
> 
> 上述代码中的script不会被识别为有效的JavaScript代码，而是被转义为字符串输出

### 七、JSX表示对象 ###

>  *  在上一篇文章中我们介绍在引入react的时候会同时引入一个babel库。babel除了将ES6的语法转换为ES5外，还会将JSX转译成一个名为React.createElement()的函数来调用。
>  *  React.createElement()会预先执行一些检查，以帮助我编写无错代码
> 
>     //方式一
>     const element = <h1 className="greeting">Hello, world!</h1>;
>     //方式二
>     const element2 = React.createElement("h1",{ className:'greeging'}, 'Hello, world!');
> 
> 上面的两种示例代码是完全等效的，即使我们是按照方式一写的代码，最后也会转换为方式二的形式。
> 
>  *  而实际上React.createElement()执行后会创建一个这样的对象
> 
>     const element = { 
>     	type: 'h1'
>     	props: { 
>     		className: 'greeting',
>     		children: 'Hello, world!'
>     	}
>     };
> 
>  *  这些对象被称为React元素。我们希望在屏幕上看到的内容吗，也就是我们常说的虚拟DOM，然后React再通过读取这些对象并把它们构建成真实的DOM并保持随时更新。

### 八、本章小结 ###

>  *  本章我们主要介绍了什么是JSX，以及为什么要在React中使用JSX
>  *  JSX使用的基本语法
>  *  JSX属性的定义
>  *  JSX子元素的嵌套
>  *  JSX的防注入攻击
>  *  React 对JSX的处理（转换为React对象）

> [下一章节][React]中我们将讲解如何将React元素（虚拟DOM）渲染为真实的DOM元素

[React_React]: https://blog.csdn.net/lixiaosenlin/article/details/112238757
[React_JSX]: https://blog.csdn.net/lixiaosenlin/article/details/112250656
[React]: https://blog.csdn.net/lixiaosenlin/article/details/112252554
[React_JSX_DOM_DOM]: https://blog.csdn.net/lixiaosenlin/article/details/111993181
[React_Props]: https://blog.csdn.net/lixiaosenlin/article/details/112260171
[React_state]: https://blog.csdn.net/lixiaosenlin/article/details/112314897