成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Eirunye / 1355人閱讀

摘要：代表基本上是常規(guī)。第次更新，在年完成。幾乎完全支持所有主要的瀏覽器。但這將是一段時(shí)間，直到較舊版本的瀏覽器逐步停止使用。這意味著將轉(zhuǎn)換為。在組件的情況下，寫(xiě)入的將如下所示在我們?cè)诘谝粋€(gè)作出反應(yīng)組件使用的語(yǔ)法是語(yǔ)法。

本文轉(zhuǎn)載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3797
原文：https://www.fullstackreact.com/30-days-of-react/day-2/

現(xiàn)在我們知道React是什么，讓我們來(lái)看看這個(gè)系列的其余部分將會(huì)出現(xiàn)的幾個(gè)術(shù)語(yǔ)和概念。

在我們前面的文章中，我們看了一下React，并在高級(jí)別上討論了它的工作原理。 在本文中，我們將介紹React生態(tài)系統(tǒng)的一部分：ES6和JSX。

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

在互聯(lián)網(wǎng)上的任何粗略的搜索尋找React材料，毫無(wú)疑問(wèn)，你已經(jīng)遇到了術(shù)語(yǔ)JSX，ES5和ES6。這些難懂的首字母縮略詞可能會(huì)很快混亂。

ES5（ES 代表ECMAScript）基本上是“常規(guī)JavaScript”。第5次更新JavaScript，ES5在2009年完成。它已被所有主要瀏覽器支持多年。因此，如果你在最近寫(xiě)過(guò)或看過(guò)任何JavaScript，很可能是ES5。

ES6是一個(gè)新版本的JavaScript，添加了一些不錯(cuò)的語(yǔ)法和功能添加。它在2015年完成。ES6 幾乎完全支持 所有主要的瀏覽器。但這將是一段時(shí)間，直到較舊版本的Web瀏覽器逐步停止使用。例如，Internet Explorer 11不支持ES6，但是具有大約12％的瀏覽器市場(chǎng)份額。

為了獲得ES6的好處今天，我們必須做一些事情，使它工作在盡可能多的瀏覽器，我們可以：

我們必須 轉(zhuǎn)換 我們的代碼，以便更廣泛的瀏覽器了解我們的JavaScript。這意味著將ES6 JavaScript轉(zhuǎn)換為ES5 JavaScript。

We have to include a shim or polyfill that provides additional functionality added in ES6 that a browser may or may not have.

我們必須包括一個(gè)墊片或polyfill，提供在ES6中添加的瀏覽器可能具有或可能沒(méi)有的附加功能。

我們將在本系列的稍后部分看到我們?nèi)绾巫龅竭@一點(diǎn)。

我們將在本系列中編寫(xiě)的大多數(shù)代碼都可以輕松地轉(zhuǎn)換為ES5。在我們使用ES6的情況下，我們將首先介紹功能，然后通過(guò)它。

我們將看到，所有的React組件都有一個(gè)render函數(shù)，它指定了React組件的HTML輸出。JavaScript eXtension，或更常見(jiàn)的JSX，是一個(gè)React擴(kuò)展，允許我們編寫(xiě)看起來(lái)像 HTML的JavaScript 。

盡管在以前的范例中，將JavaScript和標(biāo)記包含在同一個(gè)地方被認(rèn)為是一種不好的習(xí)慣，但是結(jié)果是將視圖與功能相結(jié)合使得對(duì)視圖的推理變得非常簡(jiǎn)單。

看看這是什么意思，想象一下，我們有一個(gè)React組件來(lái)呈現(xiàn)一個(gè)h1 HTML標(biāo)簽。JSX允許我們以非常類(lèi)似于HTML的方式聲明這個(gè)元素：

class Header extends React.Component {
  render() {
    return (
      
Hello World

    );
  }
}

這個(gè)HelloWorld組件中的render()函數(shù)看起來(lái)像它的返回HTML，但其實(shí)這是JSX。JSX 在運(yùn)行時(shí)被翻譯成常規(guī)JavaScript。那個(gè)組件，翻譯后，看起來(lái)像這樣：

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

雖然JSX看起來(lái)像HTML，但它實(shí)際上只是一種更靈敏的方式React.createElement()來(lái)編寫(xiě)聲明。當(dāng)組件渲染時(shí)，它輸出一個(gè)React元素樹(shù)或該組件輸出的HTML元素的虛擬表示。React然后將基于此React元素表示來(lái)確定對(duì)實(shí)際DOM所做的更改。在HelloWorld組件的情況下，React寫(xiě)入DOM的HTML將如下所示：

Hello World


在class extends我們?cè)诘谝粋€(gè)作出反應(yīng)組件使用的語(yǔ)法是ES6語(yǔ)法。它允許我們使用熟悉的面向?qū)ο髽邮骄帉?xiě)對(duì)象。
在ES6中，class 語(yǔ)法可能翻譯為：


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

因?yàn)镴SX是JavaScript，我們不能使用JavaScript保留字。這包括class和像for。

React提供了我們的屬性className。我們使用它在HelloWorld來(lái)設(shè)置我們的h1標(biāo)簽上的large 類(lèi)。還有一些其他屬性，如標(biāo)簽上的屬性for為轉(zhuǎn)換htmlFor ，因?yàn)?b>for 也是保留字。當(dāng)我們開(kāi)始使用它們時(shí)，我們將看看這些。

如果我們想要編寫(xiě)純JavaScript而不是依賴于JSX編譯器，我們可以只寫(xiě)該React.createElement()函數(shù)，而不必?fù)?dān)心抽象層。但我們喜歡JSX。它特別是更復(fù)雜的組件可讀性?？紤]下面的JSX：


  
  
Welcome back Ari

傳送到瀏覽器的JavaScript看起來(lái)像這樣：

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

再提一下，雖然你可以跳過(guò)JSX并直接編寫(xiě)后者，但JSX語(yǔ)法非常適合表示嵌套的HTML元素。

現(xiàn)在我們了解JSX，我們可以開(kāi)始編寫(xiě)我們的第一個(gè)React組件。明天加入我們，當(dāng)我們跳進(jìn)我們的第一個(gè)React應(yīng)用程序。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/84575.html

相關(guān)文章

  • 【全棧React】第13天: 重復(fù)元素

    摘要：在我們的應(yīng)用中添加太多的復(fù)雜度來(lái)加載外部數(shù)據(jù)之前今天我們將快速了解如何在應(yīng)用中重復(fù)組件元素。出于性能原因使用虛擬嘗試限制在重新視圖時(shí)需要更新的元素的數(shù)量。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3826原文：https://www.fullstackreact.com/30-days-of-react/day-13/ 今...

    RaoMeng 評(píng)論0 收藏0

  • 【全棧React】第5天: 數(shù)據(jù)驅(qū)動(dòng)

    摘要：今天，我們將把我們的組件設(shè)置為由數(shù)據(jù)驅(qū)動(dòng)，訪問(wèn)外部數(shù)據(jù)。介紹屬性允許我們以與相同的語(yǔ)法向組件發(fā)送數(shù)據(jù)，使用組件上的特性或?qū)傩?。我們將我們的活?dòng)項(xiàng)目移動(dòng)到我們將針對(duì)每個(gè)項(xiàng)目運(yùn)行的項(xiàng)目中。本周，我們使用概念更新了由數(shù)據(jù)驅(qū)動(dòng)的組件。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3821原文：https://www.fullstack...

    inapt 評(píng)論0 收藏0

  • 【全棧React】第9天: 樣式

    摘要：我們將為組件賦值，并使用選擇器來(lái)定位頁(yè)面上的元素，讓瀏覽器處理樣式。的工作方式是將因此命名父樣式作為子樣式的樣式。這通常是錯(cuò)誤的原因，因?yàn)轭?lèi)通常具有通用名稱，并且易于覆蓋非特定類(lèi)的類(lèi)樣式。反之，我們的樣式名稱需要使用駝峰命名方式。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3820原文：https://www.fullsta...

    zilu 評(píng)論0 收藏0

  • 【全棧React】React 30天教程索引

    摘要：今天我們將討論創(chuàng)建組件的最終方案，即無(wú)狀態(tài)函數(shù)的純組件。今天我們正在研究一種處理提出的復(fù)雜數(shù)據(jù)的方法，稱為體系結(jié)構(gòu)。第天部署介紹今天，我們將探討部署我們的應(yīng)用所涉及的不同部分，以便外界可以使用我們的應(yīng)用。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...

    appetizerio 評(píng)論0 收藏0

  • 【全棧React】第1天: 什么是 React?

    摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們從一開(kāi)始就開(kāi)始。讓我們看看是什么，是什么讓運(yùn)轉(zhuǎn)起來(lái)。什么是是一個(gè)用于構(gòu)建用戶界面的庫(kù)。它是應(yīng)用程序的視圖層。所有應(yīng)用程序的核心是組件。組件是可組合的。虛擬完全存在于內(nèi)存中，并且是網(wǎng)絡(luò)瀏覽器的的表示。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3765原文：https://www.ful...

    ralap 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<