### JSX 在本节中，你将会学习一种新的语法，它介于 HTML 和 JavaScript 之间，它就是 JSX，JSX 也是 React 学习的前置内容。 #### 知识点 - JSX 简介 - JSX 表达式 - JSX 属性 - JSX 与事件 - JSX 与样式 - JSX 与 Objects - JSX 与 XSS - 不使用 JSX #### JSX 简介 JSX 用来声明 React 中的元素，我们会在下一节中对元素及元素渲染进行讲解，本节中我们将着眼 JSX 之于 React 的作用。**JSX 的全称是 JavaScript XML，它是一种 JavaScrip 的语法扩展**，也就是一种语法，在 React 中我们不一定要使用 JSX，但使用 JSX 有以下优点： - JSX 执行更快，因为它在编译为 JS 代码后进行了优化 - 它是类型安全的，在编译过程中就能发现错误 - 使用 JSX 编写模板更简单我们先来看一个 JSX 的例子： ``` const element =

Hello,React

; ``` 这就是 JSX 的语法，是不是有些像 JavaScript，又有些像 HTML。JSX 是在 JavaScipt 内部实现的。解析器对 JSX 是这样工作的：遇到 `<` ,JSX 就当 HTML 解析，遇到 `{` ， JSX 就当 JavaScript 解析。 #### JSX 表达式 ``` Hello React!

``` ### JSX 属性在 JSX 中可以为标签添加属性，但有些地方需要注意，比如在 HTML 标签中，元素的类关键字为 class ,而在 JSX 中，`className` 替代了`class`;如果你是用的是单标签，则需要以 `/>` 结尾，如 `` 标签。 ``` const user = { url: "url", name: "name", }; const element =

; const element1 =

; ``` #### JSX 与事件 JSX 绑定事件与原生 HTML 差别并不是很大，唯一的却别就是 JSX 采用驼峰(camelCase)命名法来描述事件的名称，例如： ``` ``` 在这里，我们关注的是事件的命名 `onClick`，对应原生 HTML 中的 `onclick` 。在这里我们插一句题外话，React 模拟事件系统。React 不会把事件绑定到每一个具体元素上，而是采用事件代理模式：在根节点上为每种事件添加唯一的 Listener，然后通过触发事件的 target 找到真正的触发元素。 #### JSX 与样式在原生 HTML 中，我们使用的是字符串来为 style 添加内容，在 JSX 中，我们需要使用对象。 ```

Hello

; //or var style = { color: "#AAAAAA", width: "100px", fontSize: "15px", }; var element =

Hello

; ``` 使用 JSX 时为元素添加 style。除了字符串变为对象，在属性名的使用上也产生了变化，JSX 使用驼峰命名，例如：`font-size` 变为 `fontSize`,`background-color`变为`backgroundColor`等，它们和标准的 JavaScript 操作 DOM 样式的 API 是一致的。 #### JSX 与 Objects JSX 本质只是为一个 JavaScript 方法提供了语法糖：React.createElement(component,props,...children) ``` const element =

Hello world!

; ``` 这段代码在经过 babel 编译后会变成如下代码的形式： ``` React.createElement("div", { className: "container" }, "Hello world!"); ``` 让我们看看单标签会被编译成什么样子： ```

; React.createElement("img", { src: "url" }, null); ``` `Babel` 是一个 JavaScript 编译器，可能你还记得，我们单页面内引入 js 代码时，使用的标签是：`` ,这里我们使用 type 是 babel。**Babel 可以将 ES6 转码为 ES5，这意味着使用 Babel，我们将可以在版本很低的浏览器上使用 ES6 语法。** #### JSX 与 XSS 使用 JSX 语法可以有效的防止 XSS。我们在搭建网页的时候通常都要对用户的输入值进行一定的过滤操作，以阻止 XSS 攻击，在 React 中，我们完全不必担心这个问题，JSX 的语法帮我们隔离了这个问题： ``` const name = response.user.name; //我们可以直接使用得到的值 const element =

{name}

; ``` 之所以我们可以直接使用得到的值是因为 React DOM 在渲染之前默认会过滤所有传入的值，{}中的内容会被渲染为字符串。 #### 不使用 JSX JSX 对于 React 来说不是一个必需品，当你不想在你的开发环境搭建一个编译环境，**你可以不使用 JSX，但是我们还是推荐你在使用 React 时，使用 JSX**。我们将会给出一段使用 JSX 的代码，和一段不使用 JSX 的代码。 ``` //Test 是我们自己声明的组件，首字母必须大写，组件的概念后续会讲解 class Test extends React.Component { render() { return

Hello {this.props.name}

; } } ReactDOM.render(, document.getElementById("root")); ``` ``` class Test extends React.Component { render() { return React.createElement("div", null, `Hello ${this.props.name}`); } } ReactDOM.render( React.createElement(Test, { name: "shiyanlou" }, null), document.getElementById("root") ); ``` 不使用 JSX 的大致要领：使用 React.createElement(),但是这个方法的方法名过长，在实际应用中又会大量使用，为了减少编码量，我们可以把上述不使用 JSX 的代码段作如下简化： ``` const e = React.createElement; //将方法名赋值给 const 常量，以达到简化代码的目的 class Test extends React.Component { render() { return e("div", null, `Hello ${this.props.name}`); } } ReactDOM.render( e(Test, { name: "shiyanlou" }, null), document.getElementById("root") ); ``` #### 总结 - JSX 简介 - JSX 表达式 - JSX 属性 - JSX 与事件 - JSX 与样式 - JSX 与 Objects - JSX 与 XSS - 不使用 JSX 我们在 React 编码时，推荐使用 JSX 语法，所以熟练掌握本节的内容，会使你的后续学习轻松一些。

“React 基础入门”实验报告