WEB前端框架|web前端高级React - React从入门到进阶之JSX简介 JSX|jsx语法|jsx表达式|react|jsx|

系列文章目录
【WEB前端框架|web前端高级React - React从入门到进阶之JSX简介】第一章：React从入门到进阶之初识React
第二章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理

文章目录

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

一、JSX是什么？

开篇之前，先来看一段代码

const element = Hello, world!;

仔细看上面这段代码，说它是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 = Hello, {name}; 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 = Hello, {{name:"Alvin"}}//这种语法不被允许，会直接报错

但是在一些特殊情况下，还必须得使用对象，比如，如果我们想在标签内使用行内样式style=“XXX”，大括号内包裹的必须是一个对象，否则会直接报语法错误

const element = Alvin

在JSX语法中，大括号内除了可以嵌入JavaScript变量，对象的属性以外，还可以直接将函数调用嵌入到大括号中,需要注意的是函数必须要有返回结果

let user = { firstName: 'Alvin', lastName: 'Li' }; function getFullName(user){ return user.firstName + ' ' + user.lastName; } const element = Hello, {formatName(user)}! ReactDOM.render( element, document.getElementById('root') )

四、JSX 特定属性

在JSX语法中，我们可以给标签元素添加自定义属性，其属性值可以是引号引起来的字符串，也可以是大括号包起来的JavaScript表达式

在属性中嵌入JavaScript表达式时，对于同一个属性不能同时既使用引号又使用大括号，即在同一属性中只能使用引号（对于字符串值）或大括号（对于表达式）中的一个。如果在大括号外面又包了一层引号是不被允许的

const element = const img =

另外：因为JSX语法上更接近JavaScript而不是HTML，所以ReactDOM使用的是驼峰式（camelCase）命名来定义属性名称。例如：JSX里的class变成了className，而tabindex则变成了tabIndex。

五、使用 JSX 指定子元素

在JSX中，如果标签内没有内容我们可以使用单闭合标签

当然JSX的标签中还可以包含多层嵌套的后代标签，这时就需要使用双闭合标签了

const element= //单闭合标签 //双闭合标签 const body = Hello Good morning world

六、JSX 防止注入攻击

在JSX中我们可以放心的使用用户输入的内容，因为ReactDOM在渲染所有输入内容之前，默认会进行转义。它可以确保在应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都会被转成字符串。这样可以有效的方式XSS攻击

const element = ""

上述代码中的script不会被识别为有效的JavaScript代码，而是被转义为字符串输出

七、JSX表示对象

在上一篇文章中我们介绍在引入react的时候会同时引入一个babel库。babel除了将ES6的语法转换为ES5外，还会将JSX转译成一个名为React.createElement()的函数来调用。

React.createElement()会预先执行一些检查，以帮助我编写无错代码

//方式一 const element = Hello, world!; //方式二 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并保持随时更新。