JSX 简介

JSX

• JSX 是 JavaScript 的语法扩展，可以很好的描述 UI 应该呈现出它应有交互的本质形式。会让人联想到模板语言，但 JSX 拥有 JavaScript 的全部功能

  ```jsx harmony

const element = Hello, World!;

## 为什么要使用 JSX ？

* React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生改变时需要通知到 UI，以及在 UI 中展示准备好的数据

## 在 JSX 中嵌入表达式 ？

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

const name = 'josh Perez'
const element = <h1>Hello, {name}</h1>

ReactDOM.render(
    element,
    document.getElementById('root')
)

JSX 也是一个表达式

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

• 也就是说，你可以在 if 语句和 for 循环的代码块里面使用 JSX

  ```jsx harmony

function getGreeting(user) { if (user) { return Hello, {formatName(user)}!; } return Hello, Stranger. }

## JSX 特定属性

* 你可以通过使用引号，来将属性值指定为字符串字面量
* 也可以使用大括号，来在属性值中插入一个 JavaScript 表达式
* 对同一属性不能同时使用这两种符号
* 因为 JSX　语法上更接近　JavaScript　而不是　HTML，所以　React DOM 使用 **小驼峰命名** 来定义属性的名称
```jsx harmony

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

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

使用 JSX 指定子元素

• 假如一个标签里面没有内容，你可以使用 /> 来闭合标签，就像 XML 语法一样

JSX 防止注入攻击

• 可以安全地在 JSX 当中插入用户输入内容

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

  ```jsx harmony

const title = response.potentiallyMaliciousInput; //直接使用是安全的： const element = {title}

## JSX 表示对象

* Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用
* React.createElement() 会预先执行一些检查，以帮助你编写无错代码
* 创建出的对象被称为 “React元素”。它们描述了你希望在屏幕上看到的内容，React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新
```jsx harmony

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

const element = React.createElement(
    'h1',
    {className: 'greeting'},
    'Hello, world!'
);

// 注意，这是简化过的结构
const element = {
    type: 'h1',
    props: {
        className: 'greeting',
        children: 'Hello, world!'
    }
}