亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

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

Eirunye / 1394人閱讀

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

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

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

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

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

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

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

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

為了獲得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中添加的瀏覽器可能具有或可能沒有的附加功能。

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

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

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

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

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

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

    );
  }
}

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

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

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

Hello World


在class extends我們在第一個(gè)作出反應(yīng)組件使用的語法是ES6語法。它允許我們使用熟悉的面向?qū)ο髽邮骄帉憣ο蟆?br>在ES6中，class 語法可能翻譯為：


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

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

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

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


  
  
Welcome back Ari

傳送到瀏覽器的JavaScript看起來像這樣：

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/84575.html

相關(guān)文章

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

    摘要：在我們的應(yīng)用中添加太多的復(fù)雜度來加載外部數(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 評論0 收藏0

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

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

    inapt 評論0 收藏0

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

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

    zilu 評論0 收藏0

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

    摘要：今天我們將討論創(chuàng)建組件的最終方案，即無狀態(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 評論0 收藏0

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

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

    ralap 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<