【全栈React】第2天: 什么是 JSX?

2024年2月4日 195次阅读 来源: 二月红

本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3797
原文：https://www.fullstackreact.com/30-days-of-react/day-2/

如今我们晓得React是什么，让我们来看看这个系列的其余部份将会涌现的几个术语和观点。

在我们前面的文章中，我们看了一下React，并在高等别上议论了它的事变道理。 在本文中，我们将引见React生态系统的一部份：ES6和JSX。

JSX/ES5/ES6 什么鬼东西??!

在互联网上的任何大略的搜刮寻觅React材料，毫无疑问，你已遇到了术语JSX，ES5和ES6。这些难明的首字母缩略词能够会很快杂沓。

ES5（ES 代表ECMAScript）基本上是“通例JavaScript”。第5次更新JavaScript，ES5在2009年完成。它已被一切重要浏览器支撑多年。因而，假如你在近来写过或看过任何JavaScript，很多是ES5。

ES6是一个新版本的JavaScript，增加了一些不错的语法和功用增加。它在2015年完成。ES6 险些完整支撑 一切重要的浏览器。但这将是一段时间，直到较旧版本的Web浏览器逐渐停止运用。比方，Internet Explorer 11不支撑ES6，然则具有约莫12％的浏览器市场份额。

为了取得ES6的优点本日，我们必需做一些事变，使它事变在尽量多的浏览器，我们能够：

  1. 我们必需 转换 我们的代码，以便更普遍的浏览器相识我们的JavaScript。这意味着将ES6 JavaScript转换为ES5 JavaScript。
  2. We have to include a shim or polyfill that provides additional functionality added in ES6 that a browser may or may not have.
  3. 我们必需包含一个垫片或polyfill，供应在ES6中增加的浏览器能够具有或能够没有的附加功用。

我们将在本系列的稍后部份看到我们怎样做到这一点。

我们将在本系列中编写的大多数代码都能够轻松地转换为ES5。在我们运用ES6的情况下，我们将起首引见功用，然后经由过程它。

我们将看到，一切的React组件都有一个render函数，它指定了React组件的HTML输出。JavaScript eXtension，或更罕见的JSX，是一个React扩大，许可我们编写看起来像 HTML的JavaScript 。

只管在之前的类型中，将JavaScript和标记包含在同一个处所被认为是一种不好的习气，然则结果是将视图与功用相结合使得对视图的推理变得异常简朴。

看看这是什么意思，设想一下，我们有一个React组件来显现一个h1 HTML标签。JSX许可我们以异常类似于HTML的体式格局声明这个元素：

class Header extends React.Component {
  render() {
    return (
      <h1 className='large'>Hello World</h1>
    );
  }
}

这个HelloWorld组件中的render()函数看起来像它的返回HTML，但实在这是JSX。JSX 在运行时被翻译成通例JavaScript。谁人组件，翻译后，看起来像如许：

class HelloWorld extends React.Component {
  render() {
    return (
      React.createElement(
        'h1',
        {className: 'large'},
        'Hello World'
      )
    );
  }
}

虽然JSX看起来像HTML，但它现实上只是一种更敏锐的体式格局React.createElement()来编写声明。当组件衬着时，它输出一个React元素树或该组件输出的HTML元素的假造示意。React然后将基于此React元素示意来肯定对现实DOM所做的变动。在HelloWorld组件的情况下，React写入DOM的HTML将以下所示：

<h1 class='large'>Hello World</h1>

在class extends我们在第一个作出反应组件运用的语法是ES6语法。它许可我们运用熟习的面向对象款式编写对象。
在ES6中，class 语法能够翻译为：

var HelloWorld = function() {}
Object.extends(HelloWorld, React.Component)
HelloWorld.prototype.render = function() {}

由于JSX是JavaScript，我们不能运用JavaScript保留字。这包含class和像for。

React供应了我们的属性className。我们运用它在HelloWorld来设置我们的h1标签上的large 类。另有一些其他属性，如标签上的属性for为转换htmlFor ，由于for 也是保留字。当我们最先运用它们时，我们将看看这些。

假如我们想要编写纯JavaScript而不是依赖于JSX编译器，我们能够只写该React.createElement()函数，而没必要忧郁笼统层。但我们喜好JSX。它特别是更庞杂的组件可读性。斟酌下面的JSX：

<div>
  <img src="profile.jpg" alt="Profile photo" />
  <h1>Welcome back Ari</h1>
</div>

传送到浏览器的JavaScript看起来像如许：

React.createElement("div", null, 
  React.createElement("img", {src: "profile.jpg", alt: "Profile photo"}),
  React.createElement("h1", null, "Welcome back Ari")
);

再提一下，虽然你能够跳过JSX并直接编写后者，但JSX语法异常合适示意嵌套的HTML元素。

如今我们相识JSX，我们能够最先编写我们的第一个React组件。来日诰日到场我们，当我们跳进我们的第一个React应用程序。

    原文作者：二月红
    原文地址: https://segmentfault.com/a/1190000010465188
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞