一、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 元素”。