My App

JSX 与模板

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 。

On this page