前端 Jsx

JSX

简介

这个有趣的标签语法既不是字符串也不是 HTML。

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

它被称为 JSX，是一个 JavaScript 的语法扩展，运用于React架构中，其格式比较像模板语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单元，JSX就是用来声明React当中的元素的，React使用JSX来描述用户界面。

为什么使用JSX

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

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

React不强制要求使用JSX，但在JavaScript代码中将JSX和UI放在一起时，会在视觉上有辅助作用，还可以使React显示更多有用的错误和警告消息。

我们可以在if语句和for循环的代码块中使用JSX，将JSX赋值给变量，把JSX当做参数传入，以及从函数中返回JSX：

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

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

JSX 特定属性

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

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

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

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

在属性中嵌入JavaScript表示式时，不要在大括号外面加引号。应该仅使用引号（对于字符串值）或者大括号（对于表达式）中的一个，对于同一个属性不能同时使用这两种符号。

因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

例如，JSX中的class变成了className，而tabindex变为tabIndex。

# 语法
const element = <img src={user.avatarUrl} />;
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

JSX表示对象

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

下面两段相等的代码：

# 代码1
const element = {
  <h1 className="greeting">Hello, world!</h1>
}
# 代码2
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);
# 转化结果
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
}

这些对象被称为React元素。它们描述了你希望在屏幕上看到的内容。React通过读取这些对象，然后使用它们来构建DOM以及保持随时更新。

推荐在编辑器中使用Babel提供的语言定义，来正确的高亮显示ES6和JSX代码。