JSX 与模板
JSX 与模板
JSX 有时被比作模板语言,如 Handlebars 或 EJS 或 Pug。然而,这两个概念之间有一个重要区别。在本课程中,我们将了解 JSX 有点不同寻常。
将 JSX 与模板语言进行比较
作为比较,我们假设有一个这样的 Handlebars 模板:
Handlebars 库包括一个 JavaScript 函数,它接受 Handlebars 模板和一些数据,并生成一个 HTML 字符串。例如,如果有一个名为 Sujata 的用户,我们将得到以下字符串: "<div><h1>Sujata</h1></div>"
。
模板语言通常也具有自定义 DSL?,具有特殊的语法和关键字。在上面的示例中, #if
是一个内置的助手,将有条件地呈现一些子内容。另一个助手, #each
,将遍历一个数组。
这里的重要区别在于: 所有动态/自定义内容都是在我们编译模板时发生的。
使用 React,我们将 JSX 编译为 JS。我们尚未解析任何动态内容。
我们很快就会更多了解条件渲染,但是作为一个快速预览,在 JSX 中我们将做同样的事情:
而这就是它编译成的内容:
请注意,我们的情况尚未解决。我们还不知道是否已有用户。
模板语言是一种独特的东西。它们会创造自定义的语法,比如 {{#if}} 。实质上,你必须学会一个完全独立的语言,了解它与 JavaScript 的微妙差异。
JSX 实际上是一个很薄的抽象层。它并不是一种完全独立的语言。我们使用普通的 JavaScript 来管理条件和迭代。这意味着你只需要理解一种语言,JavaScript,就能有效地使用它。
我花了一段时间才理解这个区别。换句话说:
- 模板语言将您编写的标记转换为 HTML。这意味着它们需要发明一种自定义的迷你语言来执行动态操作,因为 HTML 本身并不具备这些功能。
- JSX 将您编写的标记转化为 JavaScript。它“转发”您包含的任何逻辑,而不解析它。
个人而言,我更喜欢 JSX 方法。我只喜欢要理解一种语言。
另一个好处是:在编写标记时,我们可以充分利用 JavaScript 的全部功能!模板语言的范围往往比较狭窄,因此它们不允许你执行像筛选数组以仅选择某些项目这样的操作。我们不再局限于像 {{#each}} 这样的少量助手,而是可以使用所有可用的 JS 方法,例如 .filter 、 .slice 和 .reduce 。