JSX 与模板

JSX 有时被比作模板语言，如 Handlebars 或 EJS 或 Pug。然而，这两个概念之间有一个重要区别。在本课程中，我们将了解 JSX 有点不同寻常。

将 JSX 与模板语言进行比较

作为比较，我们假设有一个这样的 Handlebars 模板：

<div>
  {{#if user}}
    <h1>{{user.name}}</h1>
  {{/if}}
</div>

Handlebars 库包括一个 JavaScript 函数，它接受 Handlebars 模板和一些数据，并生成一个 HTML 字符串。例如，如果有一个名为 Sujata 的用户，我们将得到以下字符串： "<div><h1>Sujata</h1></div>" 。

模板语言通常也具有自定义 DSL？，具有特殊的语法和关键字。在上面的示例中， #if 是一个内置的助手，将有条件地呈现一些子内容。另一个助手， #each ，将遍历一个数组。

这里的重要区别在于: 所有动态/自定义内容都是在我们编译模板时发生的。

使用 React，我们将 JSX 编译为 JS。我们尚未解析任何动态内容。

我们很快就会更多了解条件渲染，但是作为一个快速预览，在 JSX 中我们将做同样的事情:

<div>{user && <h1>{user.name}</h1>}</div>

而这就是它编译成的内容：

React.createElement(
  "div",
  {},
  user && React.createElement("h1", {}, user.name),
);

请注意，我们的情况尚未解决。我们还不知道是否已有用户。

模板语言是一种独特的东西。它们会创造自定义的语法，比如 {{#if}} 。实质上，你必须学会一个完全独立的语言，了解它与 JavaScript 的微妙差异。

JSX 实际上是一个很薄的抽象层。它并不是一种完全独立的语言。我们使用普通的 JavaScript 来管理条件和迭代。这意味着你只需要理解一种语言，JavaScript，就能有效地使用它。

我花了一段时间才理解这个区别。换句话说：

模板语言将您编写的标记转换为 HTML。这意味着它们需要发明一种自定义的迷你语言来执行动态操作，因为 HTML 本身并不具备这些功能。
JSX 将您编写的标记转化为 JavaScript。它“转发”您包含的任何逻辑，而不解析它。

个人而言，我更喜欢 JSX 方法。我只喜欢要理解一种语言。

另一个好处是：在编写标记时，我们可以充分利用 JavaScript 的全部功能！模板语言的范围往往比较狭窄，因此它们不允许你执行像筛选数组以仅选择某些项目这样的操作。我们不再局限于像 {{#each}} 这样的少量助手，而是可以使用所有可用的 JS 方法，例如 .filter 、 .slice 和 .reduce 。

JSX 与模板

将 JSX 与模板语言进行比较

On this page