React总结一（JSX）

一、JSX

 

a. 是什么？

如：

const element = <h1>Hello, world!</h1>;

JSX 是 一个JavaScript 的语法扩展。JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能。

React 并没有采用  将标记与逻辑进行分离到不同文件  这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

 

b. 优点

在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。

它还可以使 React 显示更多有用的错误和警告消息。

 

c. 用法

1⃣️ 在JSX中嵌入表达式：可以在大括号内放置任何有效的 JavaScript 表达式。

2⃣️ JSX本身也可以当成表达式：在 if 语句和 for 循环的代码块中使用 JSX，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX。

3⃣️ JSX特定属性：通过使用引号，来将属性值指定为字符串字面量。

4⃣️ 使用JSX指定子元素，假如一个标签里面没有内容，你可以使用 /> 来闭合标签，就像 XML 语法一样。也可以当作父元素包含其他标签。

4⃣️ 防止注入攻击，因为React DOM 在渲染所有输入内容之前，默认会进行转义。

5⃣️ Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象，这些对象被称为 “React 元素”。