Logo
Section 1 / 4

JSX 是 React 的重要基础

你将了解 JSX 及其重要性。

导入

JSX 是 React 的重要基础

你将了解 JSX 及其重要性。

JSX

我们来谈谈JSX。在大多数React组件中，JSX构成了代码的主要部分，因此它也是React整体中极为重要的一环。

我们认为，JSX是开发者社区能够广泛且迅速接纳React的重要原因之一。

JSX
JSX

注意：如今，甚至像Vue.js这样的其他框架或库也提供了使用JSX的能力，以增强其组件的功能。

从表面上看，JSX与HTML或XML并没有太大区别。和XML或XHTML一样，每个开始标签都必须有对应的结束标签（如</div>），或者使用自闭合形式（如<img/>）。但与XML和XHTML不同的是，JSX可以包含JavaScript表达式，这使得它功能非常强大。

在构建流程的后续阶段，JSX元素会被转换为嵌套的React.createElement()调用。JSX利用了React所创建元素的树形结构。

尽管听起来可能有些复杂，但实际上并不难理解。我们来看一个HTML代码片段的例子：

1<div id="app">
2  <p>A paragraph in JSX</p>
3  <p>Another paragraph</p>
4</div>

如果我们在JSX中使用这段HTML代码，Babel最终会将其编译为如下可执行的JavaScript代码：

1React.createElement(
2  'div',
3  { id: 'app' },
4  React.createElement('p', null, 'A paragraph in JSX'),
5  React.createElement('p', null, 'Another paragraph')
6);

我们来逐个分析上面代码中传递给createElement()的参数：

  1. 第一个参数表示DOM元素的标签名（字符串形式），或者是另一个JSX元素（在这种情况下，通常是一个函数引用）。
  2. 第二个参数是该元素的props（属性）。props类似于HTML属性，但比普通HTML属性更加灵活。它们不仅限于字符串类型，还可以包含数组、对象，甚至其他React组件作为值。
  3. 其余的所有参数都是该元素的“子节点”（children）。以上例而言，div包含两个子节点——两个段落（<p>）。而这两个段落本身没有额外的props（即null），仅包含文本字符串作为子节点，分别是A paragraph in JSX和Another paragraph。

虽然刚开始接触时JSX可能看起来有点陌生，但很快你就会熟练掌握。经过练习后，你会发现它与编写HTML标记非常相似。不过，理解JSX底层的工作原理仍然非常重要，尤其是在未来学习更复杂结构的时候。

ES2015+ 简介

JavaScript 中的表达式