国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React.js學(xué)習(xí)筆記之JSX解讀

tianlai / 865人閱讀

摘要：學(xué)習(xí)筆記之解讀前端技術(shù)不多說，大腿很粗什么是是的核心組成部分，它使用標(biāo)記的方式去直接聲明界面，界面組件之間可以互相嵌套。它的目的是通過各種編譯器將這些標(biāo)記編譯成標(biāo)準(zhǔn)的語言。的標(biāo)簽與函數(shù)名都是使用的駝峰命名。目前，一個的，只能返回一個節(jié)點。

React.js學(xué)習(xí)筆記之JSX解讀

@(前端技術(shù))

Why React?

不多說，F(xiàn)acebook大腿很粗

什么是JSX

JSX是React的核心組成部分，它使用XML標(biāo)記的方式去直接聲明界面，界面組件之間可以互相嵌套。

JSX=JavaScriptXML

JSX可以理解為在JS中編寫與XML類似的語言（與XML有本質(zhì)上的不同），它的目的不是要在瀏覽器或者引擎中實現(xiàn)，也不是把其加入ECMAScript標(biāo)準(zhǔn)。它的目的是通過各種編譯器將這些標(biāo)記編譯成標(biāo)準(zhǔn)的JS語言。

JSX是：

基于ECMAScript的一種新特性（并不是一種新語言）

一種定義帶屬性樹結(jié)構(gòu)（DOM結(jié)構(gòu)）的語法

JSX不是：

XML或者HTML

一種限制 （你不需要為了 React 使用 JSX，可以直接使用純粹的 JS。但更建議使用 JSX , 因為它能定義簡潔且我們熟知的包含屬性的樹狀結(jié)構(gòu)語法。）

JSX的特點：

類XML語法容易接受，結(jié)構(gòu)清晰

增強(qiáng)JS語義

抽象程度高，屏蔽DOM操作，跨平臺

代碼模塊化

// 用JSX來表達(dá)組件
var dropdown =
  
    A dropdown list
    
      Do Something
      Do Something Fun!
      Do Something Else
    
  ;
render(dropdown);
JSX語法

JSX本身就和XML語法類似，可以定義屬性以及子元素。唯一特殊的是可以用大括號來加入JavaScript表達(dá)式，例如

var HelloMessage = React.createClass({
  render: function() {
    return 
Hello {this.props.name}
;
  }
});
ReactDOM.render(, mountNode);
一、元素名

自定義出的組件標(biāo)簽名，React 的 JSX 里約定分別使用首字母大、小寫來區(qū)分本地組件的類和 HTML 標(biāo)簽。render渲染時，會把大寫的組件名定義為自定義組件，把小寫的組件名定義為HTML自帶的標(biāo)簽名進(jìn)行渲染。

var HelloMessage =

JSX的標(biāo)簽與函數(shù)名都是使用的駝峰命名。

htmlFor和className

for和class為js的保留字，在書寫for與class時需要修改為htmlFor何className，注意都是使用的駝峰命名。

自閉合標(biāo)簽

在 JSX 中， 是合法的，而 就不合法。 所有的標(biāo)簽都必須閉合，可以是自閉和的形式，也可以是常規(guī)的閉合。

注意：所有 React component 都可以采用自閉和的形式，包括div等
二、子節(jié)點

組件與組件之間就像標(biāo)簽與標(biāo)簽之間可以有嵌套關(guān)系，與HTML不同的是可以在子節(jié)點中使用求值表達(dá)式。目前， 一個 component 的 render，只能返回一個節(jié)點。如果你需要返回一堆 div ， 那你必須將你的組件用 一個div 或 span 或任何其他的組件包裹。

切記，JSX 會被編譯成常規(guī)的 JS； 因此返回兩個函數(shù)也就沒什么意義了，同樣地，千萬不要在三元操作符中放入超過一個子節(jié)點。
節(jié)點屬性：

使用標(biāo)簽的時候指定屬性和屬性值傳入標(biāo)簽內(nèi)部，使標(biāo)簽內(nèi)部可以使用屬性值。

注意：

如果往原生 HTML 元素里傳入 HTML 規(guī)范里不存在的屬性，React 不會顯示它們。如果需要使用自定義屬性，要加 data- 前綴。


然而任意屬性支持自定義元素

`

三、求值表達(dá)式

要使用 JavaScript 表達(dá)式作為屬性值，只需把這個表達(dá)式用一對大括號 ( { } ) 包起來，不要用引號 ( " " )。
求值表達(dá)式本身與JSX沒有多大關(guān)系，是JS中的特性。它是會返回值的表達(dá)式，與語句有本質(zhì)上的不同，在編寫JSX時，在 { } 中不能使用語句（if語句、for語句等等）。我們不能直接使用語句，但可以把語句包裹在函數(shù)求值表達(dá)式中運用。建議把函數(shù)表達(dá)式獨立出來，在 { } 調(diào)用。

條件判斷的寫法

你沒法在JSX中使用 if-else 語句，因為 JSX 只是函數(shù)調(diào)用和對象創(chuàng)建的語法糖。在 { } 中使用，是不合法的JS代碼，不過可以采用三元操作表達(dá)式

var HelloMessage = React.createClass({
  render: function() {
    return 
Hello {this.props.name ？ this.props.name : "World"}
;
  }
});
ReactDOM.render(, document.body);

可以使用比較運算符“ || ”來書寫，如果左邊的值為真，則直接返回左邊的值，否則返回右邊的值，與if的效果相同。

var HelloMessage = React.createClass({ 
  render: function() {
      return 
Hello {this.props.name || "World"}
;
  }
});
ReactDOM.render(, document.body);

也可以使用變量來書寫

var HelloMessage = React.createClass({
  getName : function() {
      if (this.props.name)
          return this.props.name
      else
          return "world"
  } 
  render: function() {
      var name = this.getName();
      return 
Hello {name}
;
  }
});
ReactDOM.render(, document.body);

其中可以把變量去掉，直接在 { } 中調(diào)用函數(shù)

  render: function() {
      return 
Hello {this.getName()}
;
  }
函數(shù)表達(dá)式

（ ）有強(qiáng)制運算的作用

var HelloMessage = React.createClass({ 
  render: function() {
      return 
Hello {
          （function(obj){
              if(obj.props.name)
                  return obj.props.name
              else
                  return "World"
              }(this))
      }
;
  }
});
ReactDOM.render(, document.body);

外括號“ ）”放在外面和里面都可以執(zhí)行。唯一的區(qū)別是括號執(zhí)行完畢拿到的是函數(shù)的引用，然后再調(diào)用；括號放在外面的時候拿到的事返回值。需傳入（this）。

四、注釋

JSX 里添加注釋很容易；它們只是 JS 表達(dá)式而已。你只需要在一個標(biāo)簽的子節(jié)點內(nèi)(非最外層)小心地用 { } 包圍要注釋的部分。

var content = (
  
);
五、樣式

盡管在大部分場景下我們應(yīng)該將樣式寫在獨立的CSS文件中，但是有時對于某個特定組件而言，其樣式相當(dāng)簡單而且獨立，那么也可以將其直接定義在JSX中。在JSX中使用樣式和真實的樣式也很類似，通過style屬性來定義，但和真實DOM不同的是，屬性值不能是字符串而必須為對象，需要注意的是屬性名同樣需要駝峰命名法。例如：

Hello World.
var style = {    
    color : "red",
    border : "1px solid #000"
}
var HelloMessage = React.createClass({
  render: function() {
    return 
Hello {this.props.name}
;
  }
});
ReactDOM.render(
, document.body);
Babel進(jìn)行JSX編譯 
JSX是一種新的語法，瀏覽器并不能直接運行

React官方博客發(fā)布了一篇文章，聲明其自身用于JSX語法解析的編譯器JSTransform已經(jīng)過期，不再維護(hù)，React JS和React Native已經(jīng)全部采用第三方Babel的JSX編譯器實現(xiàn)。原因是兩者在功能上已經(jīng)完全重復(fù)，而Babel作為專門的JavaScript語法編譯工具，提供了更為強(qiáng)大的功能。
推薦使用Webpack進(jìn)行React開發(fā)，首先通過npm安裝Babel：

npm install —save-dev babel-loader

在webpack.config.js里進(jìn)行配置

module: {
  loaders: [
    { test: /.jsx?$/, loaders: ["babel-loader"]}
  ]
}
小結(jié)

本文主要介紹了聲明組件的語法JSX。看似有點神秘的JSX背后的原理非常簡單：只是一種用于創(chuàng)建組件的XML語法。讓代碼直觀易懂是軟件項目質(zhì)量的重要保證之一，這意味著代碼更加容易理解和維護(hù)，出現(xiàn)Bug時更容易調(diào)試和修復(fù)。因此React這種采用JSX語法，以聲明式的方法來直觀的定義用戶界面的方式，正是其最大的價值。

特別感謝

極客學(xué)院React.js系列課程

React 入門實例教程 by 阮一峰

深入淺出React（三）：理解JSX和組件

React.js官方文檔

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/78708.html

相關(guān)文章

  • React 源碼深度解讀（一）：首次DOM元素渲染 - Part 1

    摘要：調(diào)用棧是這樣的這里生成的我們將其命名為，它將作為參數(shù)傳入到。整個的調(diào)用棧是這樣的組件間的層級結(jié)構(gòu)是這樣的到此為止，頂層對象已經(jīng)構(gòu)造完畢，下一步就是調(diào)用來自的方法，進(jìn)行頁面的渲染了。通過表達(dá)的結(jié)構(gòu)最終會轉(zhuǎn)化為一個純對象，用于下一步的渲染。 歡迎關(guān)注我的公眾號睿Talk，獲取我最新的文章：showImg(https://segmentfault.com/img/bVbmYjo); 一、前言...

    daydream 評論0 收藏0

  • 精益 React 學(xué)習(xí)指南 （Lean React）- 1.1 React 介紹

    摘要：單向數(shù)據(jù)流應(yīng)用的核心設(shè)計模式，數(shù)據(jù)流向自頂向下我也是性子急的人，按照技術(shù)界的慣例，在學(xué)習(xí)一個技術(shù)前，首先得說一句。然而的單向數(shù)據(jù)流的設(shè)計讓前端定位變得簡單，頁面的和數(shù)據(jù)的對應(yīng)是唯一的我們可以通過定位數(shù)據(jù)變化就可以定位頁面展現(xiàn)問題。 書籍完整目錄 1.1 React 介紹 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...

    lsxiao 評論0 收藏0

  • 2017-08-15 前端日報

    摘要：前端日報精選變量聲明與賦值值傳遞淺拷貝與深拷貝詳解淺談自適應(yīng)學(xué)習(xí)比你想象的要簡單常見排序算法之實現(xiàn)世界萬物誕生記中文深入理解筆記與異步編程譯不可變和中的知乎專欄譯怎樣避免開發(fā)時的深坑瘋狂的技術(shù)宅在翻譯網(wǎng)格布局掘金詳解改變模糊度亮 2017-08-15 前端日報 精選 ES6 變量聲明與賦值：值傳遞、淺拷貝與深拷貝詳解淺談web自適應(yīng)學(xué)習(xí) React.js 比你想象的要簡單常見排序算法之...

    xinhaip 評論0 收藏0

  • 不得不聊聊的react--入門篇

    摘要：一誕生的性能瓶頸，主要有以下原因。注意組件類的第一個字母必須大寫，否則會報錯。組件并不是真實的節(jié)點，而是存在于內(nèi)存之中的一種數(shù)據(jù)結(jié)構(gòu)，叫做虛擬。此外，還提供兩種特殊狀態(tài)的處理函數(shù)。不會隨著時間改變可能不是。 本文為學(xué)習(xí)筆記，適合入門的童鞋，如有錯誤，請多多指教。 一、react誕生 Web app的性能瓶頸，主要有以下原因。 （1）Web基于DOM，而DOM很慢。瀏覽器打開網(wǎng)頁時，需要...

    lidashuang 評論0 收藏0

發(fā)表評論

0條評論

tianlai

男|高級講師

TA的文章

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