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

tianlai 發(fā)布于2019-08-19 17:38 / 889人閱讀

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

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ì)上的不同），它的目的不是要在瀏覽器或者引擎中實(shí)現(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 , 因?yàn)樗芏x簡(jiǎn)潔且我們熟知的包含屬性的樹狀結(jié)構(gòu)語法。）

JSX的特點(diǎn)：

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

增強(qiáng)JS語義

抽象程度高，屏蔽DOM操作，跨平臺(tái)

代碼模塊化

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

JSX語法

JSX本身就和XML語法類似，可以定義屬性以及子元素。唯一特殊的是可以用大括號(hào)來加入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渲染時(shí)，會(huì)把大寫的組件名定義為自定義組件，把小寫的組件名定義為HTML自帶的標(biāo)簽名進(jìn)行渲染。

var HelloMessage =

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

htmlFor和className

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

自閉合標(biāo)簽

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

注意：所有 React component 都可以采用自閉和的形式，包括div等

二、子節(jié)點(diǎn)

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

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

節(jié)點(diǎn)屬性：

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

注意：

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

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

三、求值表達(dá)式

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

條件判斷的寫法

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

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

可以使用比較運(yùn)算符“ || ”來書寫，如果左邊的值為真，則直接返回左邊的值，否則返回右邊的值，與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)制運(yùn)算的作用

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);

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

四、注釋

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

var content = (
  
    {/* 一般注釋, 用 {} 包圍 */}
    
  
);

五、樣式

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

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是一種新的語法，瀏覽器并不能直接運(yùn)行

React官方博客發(fā)布了一篇文章，聲明其自身用于JSX語法解析的編譯器JSTransform已經(jīng)過期，不再維護(hù)，React JS和React Native已經(jīng)全部采用第三方Babel的JSX編譯器實(shí)現(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。看似有點(diǎn)神秘的JSX背后的原理非常簡(jiǎn)單：只是一種用于創(chuàng)建組件的XML語法。讓代碼直觀易懂是軟件項(xiàng)目質(zhì)量的重要保證之一，這意味著代碼更加容易理解和維護(hù)，出現(xiàn)Bug時(shí)更容易調(diào)試和修復(fù)。因此React這種采用JSX語法，以聲明式的方法來直觀的定義用戶界面的方式，正是其最大的價(jià)值。

特別感謝

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

React 入門實(shí)例教程 by 阮一峰

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

React.js官方文檔

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

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

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

登陸后可評(píng)論

0條評(píng)論

tianlai

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow1.14.0

閱讀 883·2023-04-25 19:40
怎么查看tensorflow版本

閱讀 3517·2023-04-25 17:41
#雙11#iON，美國VPS，$11.11/季，1核/2G內(nèi)存/50G SSD/2T流量/G口帶寬

閱讀 3032·2021-11-11 11:01
技本功丨呀~我不會(huì)寫CSS之vertical-align（上集）

閱讀 2671·2019-08-30 15:55
基于Node.js的大文件分片上傳

閱讀 3243·2019-08-30 15:44
基于vue項(xiàng)目的知識(shí)總結(jié)

閱讀 1378·2019-08-29 14:07
JQuery 對(duì)象與 DOM 對(duì)象

閱讀 506·2019-08-29 11:23
php閉合標(biāo)簽輸出多余空行使xml頁面顯示錯(cuò)誤的處理

閱讀 1343·2019-08-27 10:54

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

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

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

相關(guān)文章

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

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

2017-08-15 前端日?qǐng)?bào)

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

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

0條評(píng)論

tianlai

男|高級(jí)講師

TA的文章

tensorflow1.14.0

怎么查看tensorflow版本

#雙11#iON，美國VPS，$11.11/季，1核/2G內(nèi)存/50G SSD/2T流量/G口帶寬

技本功丨呀~我不會(huì)寫CSS之vertical-align（上集）

基于Node.js的大文件分片上傳

基于vue項(xiàng)目的知識(shí)總結(jié)

JQuery 對(duì)象與 DOM 對(duì)象

php閉合標(biāo)簽輸出多余空行使xml頁面顯示錯(cuò)誤的處理

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

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

相關(guān)文章

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

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！