jsx里嵌套jsx_JSX简介

jsx里嵌套jsx

最初引入React时，JSX是引起大多数人关注（并引起最多批评）的功能之一。 如果您正在学习React，或者曾经看过任何代码示例，则可能在语法上做了两遍。 HTML和JavaScript的这种奇怪的融合是什么？ 这甚至是真实的代码吗？

让我们看看JSX到底是什么，它是如何工作的，以及为什么首先要混合HTML和JS的原因！

什么是JSX？

JSX被React Docs定义为“ JavaScript扩展”或“用于调用React.createElement(component, props, ...children))语法糖”，这使编写React组件变得容易。

JSX被认为是一种领域特定语言（DSL） ，它看起来与模板语言非常相似，例如Mustache，Thymeleaf，Razor，Twig或其他。

它不会直接呈现为HTML，而是呈现为Virtual DOM所使用的React类。 最终，通过虚拟DOM的神奇魔力，它将进入页面并呈现为HTML。

它是如何工作的？

基本上，JSX仍然只是具有某些附加功能JavaScript。 使用JSX，您可以编写与HTML或XML非常相似的代码，但是可以将JavaScript方法和变量无缝混合到代码中。 JSX由诸如Babel之类的编译器进行解释，并呈现为UI框架（在这种情况下为React）可以理解JavaScript代码。

不喜欢JSX？ 这很酷。 从技术上讲，这不是必需的，而且React Docs实际上包含了有关使用“ React Without JSX ”的部分。 但是，现在让我警告您，这并不漂亮。 不相信我吗 看一看。

JSX：

class SitePoint extends Component {
  render() {
    return (
      <div>My name is <span>{this.props.myName}</span></div>
    )
  }
}

React Sans JSX：

class SitePoint extends Component {
  render() {
    return React.createElement(
      "div",
      null,
      "My name is",
      React.createElement(
        "span",
        null,
        this.props.myName
      )
    )
  }
}

当然，查看该页面上的那些小示例代码，您可能会想：“哦，还不错，我可以做到。” 但是您能想象编写这样的整个应用程序吗？

该示例只是两个简单的嵌套HTML元素，没有花哨。 基本上，只是嵌套的Hello World 。 尝试在没有JSX的情况下编写React应用程序将非常耗时，而且，如果您像我们大多数其他开发人员一样在DevLand™中充当字符，它很可能很快会变成混乱的意大利面条式代码混乱。 ！

使用框架和库之类的东西可以使我们的生活更轻松，而不是更艰难。 我敢肯定，在我们的职业生涯中，我们都已经看到过过度使用和滥用库或框架的情况，但是在您的React中使用JSX绝对不是其中一种。

分离问题呢？

现在，对于那些学会了不将HTML与我们的JS混合在一起的人-它的糟糕程度，以及如果这样做的话，我们的应用程序将被启示录的Bug Gods困扰-在您JavaScript中混合HTML可能似乎像各种错误。 毕竟，您必须不惜一切代价保持关注点分离！ 世界取决于它！

我知道，我在那里， 我是你 。

但是，看起来好像很奇怪，但实际上还没有那么糟 ，而且您的担忧仍然分开。 作为一个已经使用React足够长的时间来适应它的人，在JavaScript代码库中使用HTML / XML的小片段确实有点……神奇。 它消除了对HTML的管理，并为您提供了美观，可靠的代码。 只是代码。 它有助于减轻尝试使用标记语言（用于构建Word文档）来构建应用程序的麻烦，并将其带回到应用程序代码的控制之下。

另一个无法将您JavaScript与HTML分开的问题：如果您的JS无法下载或运行，而用户只剩下HTML / CSS来呈现该怎么办？ 如果您以React方式构建应用程序，则HTML（如果使用WebPack，甚至CSS）都将与JavaScript本身捆绑在一起。 因此，用户实际上只下载了一个小HTML文件，然后下载了一个包含其他所有内容的大型JavaScript有效负载。

不幸的是，担心搜索引擎和SEO仍然是一个合理的问题。 我们都知道主要的搜索引擎现在都在渲染JavaScript，但是使用JavaScript进行初始渲染仍然会比较慢，这可能会影响您的整体排名。 为了减轻这种情况，可以在将React发送到客户端之前在服务器上对其进行初始渲染。 这不仅可以使搜索引擎更快地拉您的网站，而且还可以为您的用户提供更快的First Meanfulful Paint 。

这样做可能很快变得很复杂，但是在撰写本文时，SitePoint本身实际上使用了这种方法。 布拉德·丹佛（Brad Denver）在这里做了出色的写作：“ 通用渲染：我们如何重建SitePoint ”。

呈现服务器端仍然只能帮助解决失败的加载（不常见）或加载时间慢（更常见）的问题。 完全禁用JavaScript的用户将无济于事。 抱歉，React应用程序仍然是基于JavaScript的应用程序。 您可以在后台做很多事情，但是一旦您开始混入应用程序功能和状态管理（例如Flux，Redux或MobX），您的时间投入与潜在收益就会开始为负值。

不只是为了React

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

带有React的JSX是很棒的东西。 但是，如果您正在使用另一个框架或库，但仍然想使用它，该怎么办？ 好吧，您很幸运–因为从技术上讲JSX与React无关。 还记得DSL或“语法糖”吗？ Vue.js实际上支持JSX 开箱即用 ，也有过尝试与其他框架如角2和灰烬使用它。

我希望这个JSX快速入门可以帮助您更好地了解JSX是什么，如何为您提供帮助以及如何将其用于创建应用程序。 现在回到那里，制作一些很棒的东西！

翻译自: https://www.sitepoint.com/an-introduction-to-jsx/

jsx里嵌套jsx