01. JSX 简介

什么是 JSX？

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

以类似模板语法的方式描述 UI 的一种语法。它是 JS 的语法糖，本质上也是 JS。可以在其中使用变量或表达式、函数等。

为什么使用 JSX？

将标记与逻辑 共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

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

在 JSX 中嵌入表达式

const element = <h1>Hello, {2 + 2}</h1>

在 JSX 语法中，你可以在大括号内放置任何有效的 JavaScript 表达式。

JSX 也是一个表达式

在编译之后，JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象

可以把 JSX 当初一个对象来对待，可以使用它赋值给变量、当参数输入函数、返回 JSX 等。

JSX 特定属性

通过使用引号，来将属性值指定为字符串字面量：

const element = <div tabIndex="0"></div>

JSX 中的属性名使用 camelCase(小驼峰)命名。如上面例子中的tabIndex

使用大括号，来在属性值中插入一个 JavaScript 表达式：

const element = <img src={user.avatarUrl}></img>

使用 JSX 指定子元素

JSX 标签里能够包含很多子元素:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
)

JSX 防止注入攻击

React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

JSX 表示对象

Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。

以下两种示例代码完全等效：

const element = <h1 className="greeting">Hello, world!</h1>

const element = React.createElement(
  'h1', // 标签名
  { className: 'greeting' }, // 属性对象
  'Hello, world!' // 内容
)