React JSX 简介

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

JSX 优点：

JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

它是类型安全的，在编译过程中就能发现错误。

使用 JSX 编写模板更加简单快速。

我们观察一下声明的这个变量：

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

这种看起来可能有些奇怪的标签语法既不是字符串也不是 HTML。

它被称为 JSX，一种 JavaScript 的语法扩展。我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。

元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。

与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。

要将 React 元素渲染到根 DOM 节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上：

注意:

由于 JSX 就是 JavaScript，一些标识符像 class 和 for 不建议作为 XML 属性名。作为替代，React DOM 使用 className 和 htmlFor 来做对应的属性。

使用 JSX

JSX 看起来类似 HTML ，实例:

我们可以在以上代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它，实例中的 p 元素添加了自定义属性 data-myattribute，添加自定义属性需要使用 data- 前缀。

React JSX 代码可以放在一个独立文件上，例如我们创建一个 helloworld_react.js 文件，然后在 HTML 文件中引入该 JS 文件：

你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。

例如 2 + 2， user.firstName，以及 formatName(user)都是可以使用的。

书写 JSX 的时候一般都会带上换行和缩进，这样可以增强代码的可读性。与此同时，我们同样推荐在 JSX 代码的外面扩上一个小括号，这样可以防止分号自动插入的 bug。

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。

如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.

JSX 本身其实也是一种表达式，在编译之后，JSX 其实会被转化为普通的 JavaScript 对象。

这意味着，可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以：

React 推荐使用内联样式。我们可以使用 camelCase (驼峰)语法来设置内联样式. React 会在指定元素数字后自动添加 px 。

在标签内部的注释需要写在大括号中，

在标签外的注释不能使用大括号

JSX 允许在模板中插入数组，数组会自动展开所有成员：

你可以使用引号来定义以字符串为值的属性：

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

也可以使用大括号来定义以 JavaScript 表达式为值的属性：

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

React DOM 在渲染之前默认会过滤所有传入的值。它可以确保你的应用不会被注入攻击。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS(跨站脚本) 攻击。

Babel 转译器会把 JSX 转换成一个名为 React.createElement() 的方法调用。

下面两种代码的作用是完全相同的：

React.createElement() 这个方法首先会进行一些避免bug的检查，之后会返回一个类似下面例子的对象：

这样的对象被称为 “React 元素”。它代表所有你在屏幕上看到的东西。React 通过读取这些对象来构建 DOM 并保持数据内容一致。

最后编辑于：2019.03.29 14:48:12