JSX -- JavaScript + XML

概述

JSX（JavaScript XML）：使用JSX，编写看起来像HTML的内容，同时创建和使用自定义的类似xml的

const heading = <h1 className="site-heading">Hello, React</h1>;

注：
React 没有强制我们使用 JSX 。
在底层，它其实是在执行 createElement，它接受标签、包含属性的对象和组件的子元素，并渲染相同的信息。
该代码将具有与上面的JSX相同的输出。

const heading = React.createElement(
    'h1',
    {className: 'site-heading'},
    'Hello, React!'
);

JSX更接近JavaScript

JSX 实际上更接近 JavaScript ，而不是 HTML

因此在编写时需要注意几个关键的区别：

• 使用 className 代替 class 来添加CSS类，因为 class 是 JavaScript 中的保留关键字。
• JSX 中的属性和方法是 camelCase(驼峰命名) – onclick 将写成 onClick。
• 自动闭合标签必须以斜线结尾 – 例如 <img />。

JavaScript表达式也可以使用花括号嵌入JSX中，包括变量、函数和属性。

const name = 'Tania';
const heading = <h1>Hello, {name}</h1> ;

使用

在JSX中嵌入表达式

声明一个名为name的变量，在JSX中使用花括号将其括起来

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

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

注：
可以用 花括号 把任意的 JavaScript 表达式 嵌入到 JSX 中。
例如，2 + 2， user.firstName， 和 formatName(user)，这些都是可用的表达式

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

JSX也是表达式

通过编译，JSX表达式是常规的JavaScript对象
即，可以在if语句或者是for循环中使用jsx，用其给变量赋值，当做参数接受或者作为函数的返回值。

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

JSX指定属性值

JSX使用双引号指定字符串字面量作为属性值

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

JSX使用花括号嵌入JavaScript表达式作为属性值

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

注：在属性中嵌入 JavaScript 表达式时，不要使用引号将花括号括起来。应该使用引号（用于字符串值）或大括号（用于表达式），但不能同时使用同一个属性。

JSX指定子元素

JSX标签可以包含子元素

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

JSX防止注入攻击

在JSX中嵌入用户输入是安全的

const title = response.potentiallyMaliciousInput;
// 这样是安全的:
const element = <h1>{title}</h1>;

注：：默认情况下， 在渲染之前, React DOM 会格式化(escapes) JSX中的所有值. 从而保证用户无法注入任何应用之外的代码. 在被渲染之前，所有的数据都被转义成为了字符串处理。 以避免 XSS(跨站脚本) 攻击。

JSX表示对象

Babel 将JSX编译成 React.createElement() 调用。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
//等价于
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

React.createElement() 会执行一些检查来帮助你编写没有bug的代码
基本上它会创建一个如下所示的对象：

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

注：这些对象被称作“React元素”。可以把他们想象成为你想在屏幕上显示内容的一种描述。React会读取这些对象，用他们来构建DOM，并且保持它们的不断更新。