本文主要介绍一些关于 JSX 的知识,包括 JSX 是什么,以及它的用途等,力求让各位对 JSX 有一个简单的了解
JSX 是什么
JSX=JavaScript+XML,它看起来像是 HTML 和 JavaScript 的混合体,实际上它是一种 JavaScript 的语法扩展,用来在 React 中描述 UI 。
XML?HTML?
相信各位看到 XML 时都多多少少会想起这个名字相近的 HTML,实际上,XML 和 HTML 都是一种标记语言。但是 XML 不同于 HTML 的地方在于它拥有更严格的语法要求和它允许用户自定义标签。一般 XML 是描述数据用的,人们的关注点在于数据本身;而 HTML 更多的时候只需要显示数据,这时人们比较关心数据的外观而不是内容。
JSX 语法
来个最简单直观的例子
<script type="text/babel"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script>
这个例子中 HTML 语言直接与 JavaScript 语言混用了,在实际的开发中,这可以有效的扩展 JavaScript 的语义。如果转化成完全的 JavaScript,就应该这么写
<script type="text/javascript"> ReactDOM.render( React.DOM.h1(null,'hello,world!'), document.getElementById('example') ); </script>
简单的说,JSX 看到 HTML 就按 HTML 来对待,看到 JavaScript 就按 JavaScript 来对待
JSX 的使用
JSX 的语法
JSX 本身就和 XML 语法类似,可以定义属性以及子元素。唯一特殊的是可以用大括号来加入 JavaScript 表达式,例如:
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
一般每个组件都定义了一组属性(props,properties的简写)接收输入参数,这些属性通过 XML 标记的属性来指定。大括号中的语法就是纯 JavaScript 表达式,返回值会赋予组件的对应属性,因此可以使用任何 JavaScript 变量或者函数调用。
上述代码经 JSX 编译就会得到:
var person = React.createElement( Person, {name: window.isLoggedIn ? window.name : ''});
在 JSX 中使用事件
就像这样
<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>
JSX 和原生 HTML 定义事件的唯一区别就是 JSX 采用驼峰写法来描述事件名称,大括号中仍然是标准的 JavaScript 表达式,返回一个事件处理函数。在 JSX 中你不需要关心什么时机去移除事件绑定,因为 React 会在对应的真实 DOM 节点移除时就自动解除了事件绑定。
在 JSX 中使用样式
尽管在大部分场景下我们应该将样式写在独立的 CSS 文件中,但是有时对于某个特定组件而言,其样式相当简单而且独立,那么也可以将其直接定义在 JSX 中。在 JSX 中使用样式和真实的样式也很类似,通过 style 属性来定义,但和真实 DOM 不同的是,属性值不能是字符串而必须为对象,例如:
<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>
里面的大括号只是标准的 JavaScript 对象表达式,外面的大括号是 JSX 的语法。
在 JSX 中自定义组件
在 JSX 中,我们不仅可以使用 React 自带 div , input... 这些虚拟 DOM 元素,还可以自定义组件。组件定义之后,也都可以利用XML语法去声明,而能够使用的 XML Tag 就是在当前 JavaScript 上下文的变量名,这一点非常好用,你不必再去考虑某个 Tag 是如何对应到相应的组件实现。
JSX 学习的技巧
1.不要将 JSX 看作是模板,而应视为需要被编译的可替代的 JS 语法(语句)。也就是说,JSX 只是将类似 XML 的标记转换为 JavaScript 。
2.Babel 工具是 React 团队的主要选择,用于将 ES *代码和 JSX 语法转换为 ES5 代码。您可以通过 http://babeljs.io/ 了解更多关于Babel的信息,或阅读Babel手册。
3.JSX 的优点有四点:
(1)技术含量较低的人仍然能够理解和修改所需的部分。CSS 开发人员和设计人员会发现 JSX 比 JavaScript 更为熟悉。也就是说,使用 JSX 的 HTML 标记看起来像 HTML 标记,而不是 createElement() 函数的金字塔。
(2)您可以利用 HTML 中 JavaScript 的全部功能,避免学习或使用模板语言。JSX 不是模板解决方案。它是用于表示 UI 节点和组件的树结构的声明性语法。
(3)通过添加JSX转换步骤,你会发现一些在HTML中你可能会忽略的错误。
(4)JSX 提倡内联样式的思想。这可能是一件好事。
4.谨防 JSX Gotchas。
5.JSX 与 React 本身不同。JSX 不会试图遵守任何 XML 或 HTML 规范。JSX 被设计为 ECMAScript 特性,并且与 XML / HTML 的相似性仅在表面上(即它看起来像 XML / HTML,因此您可以只写一些熟悉的东西)。目前正在起草一份 JSX 规范,任何人都可以将其作为一个类似于 XML 的语法扩展到 ECMAScript,而不需要任何定义的语义。
6.在 JSX 中,<foo-bar />单独是有效的,而<foo-bar>不是。