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

系列文章目录

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

一、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不会被识别为有效的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元素（虚拟DOM）渲染为真实的DOM元素