React.js學習筆記之JSX解讀

tianlai 發布于2019-08-19 17:38 / 869人閱讀

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

React.js學習筆記之JSX解讀

@(前端技術)

Why React?

不多說，Facebook大腿很粗

什么是JSX

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

JSX=JavaScriptXML

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

JSX是：

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

一種定義帶屬性樹結構（DOM結構）的語法

JSX不是：

XML或者HTML

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

JSX的特點：

類XML語法容易接受，結構清晰

增強JS語義

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

代碼模塊化

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

JSX語法

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

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

一、元素名

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

var HelloMessage =

JSX的標簽與函數名都是使用的駝峰命名。

htmlFor和className

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

自閉合標簽

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

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

二、子節點

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

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

節點屬性：

使用標簽的時候指定屬性和屬性值傳入標簽內部，使標簽內部可以使用屬性值。

注意：

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

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

三、求值表達式

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

條件判斷的寫法

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

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

其中可以把變量去掉，直接在 { } 中調用函數

  render: function() {
      return Hello {this.getName()};
  }

函數表達式

（）有強制運算的作用

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

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

四、注釋

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

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

五、樣式

盡管在大部分場景下我們應該將樣式寫在獨立的CSS文件中，但是有時對于某個特定組件而言，其樣式相當簡單而且獨立，那么也可以將其直接定義在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進行JSX編譯

JSX是一種新的語法，瀏覽器并不能直接運行

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

npm install —save-dev babel-loader

在webpack.config.js里進行配置

module: {
  loaders: [
    { test: /.jsx?$/, loaders: ["babel-loader"]}
  ]
}

小結

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

特別感謝

極客學院React.js系列課程

React 入門實例教程 by 阮一峰

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

React.js官方文檔

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78708.html

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

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

daydream 2019-08-23 12:26 評論0 收藏0
精益 React 學習指南（Lean React）- 1.1 React 介紹

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

lsxiao 2019-08-19 18:20 評論0 收藏0
2017-08-15 前端日報

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

xinhaip 2019-08-22 10:53 評論0 收藏0
不得不聊聊的react--入門篇

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

lidashuang 2019-08-19 18:04 評論0 收藏0