React.js學習筆記之JSX解讀

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的特色：

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

2. 加強JS語義

3. 抽象程度高，屏蔽DOM操做，跨平臺

4. 代碼模塊化

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

JSX語法

JSX自己就和XML語法相似，能夠定義屬性以及子元素。惟一特殊的是能夠用大括號來加入JavaScript表達式，例如

var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
ReactDOM.render(<HelloMessage name="xiaowang" />, mountNode);

1、元素名

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

var HelloMessage =

JSX的標籤與函數名都是使用的駝峯命名。

htmlFor和className

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

自閉合標籤

在 JSX 中， <MyComponent /> 是合法的，而 <MyComponent> 就不合法。 全部的標籤都必須閉合，能夠是自閉和的形式，也能夠是常規的閉合。

注意：全部 React component 均可以採用自閉和的形式，包括div等

2、子節點

組件與組件之間就像標籤與標籤之間能夠有嵌套關係，與HTML不一樣的是能夠在子節點中使用求值表達式。目前， 一個 component 的 render，只能返回一個節點。若是你須要返回一堆 div ， 那你必須將你的組件用 一個div 或 span 或任何其餘的組件包裹。

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

節點屬性：

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

注意：

若是往原生 HTML 元素裏傳入 HTML 規範裏不存在的屬性，React 不會顯示它們。若是須要使用自定義屬性，要加 data- 前綴。
<div data-custom-attribute="foo" />
然而任意屬性支持自定義元素

<x-my-component custom-attribute="foo" />`

3、求值表達式

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

條件判斷的寫法

你無法在JSX中使用 if-else 語句，由於 JSX 只是函數調用和對象建立的語法糖。在 { } 中使用，是不合法的JS代碼，不過能夠採用三元操做表達式

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

可使用比較運算符「 || 」來書寫，若是左邊的值爲真，則直接返回左邊的值，不然返回右邊的值，與if的效果相同。

var HelloMessage = React.createClass({ 
  render: function() {
      return <div>Hello {this.props.name || "World"}</div>;
  }
});
ReactDOM.render(<HelloMessage name="xiaowang" />, 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 <div>Hello {name}</div>;
  }
});
ReactDOM.render(<HelloMessage name="xiaowang" />, document.body);

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

render: function() {
      return <div>Hello {this.getName()}</div>;
  }

函數表達式

（ ）有強制運算的做用

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

外括號「 ）」放在外面和裏面均可以執行。惟一的區別是括號執行完畢拿到的是函數的引用，而後再調用；括號放在外面的時候拿到的事返回值。需傳入（this）。

4、註釋

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

var content = (
  <Nav>
    {/* 通常註釋, 用 {} 包圍 */}
    <Person
      /* 多
         行
         註釋 */
      name={window.isLoggedIn ? window.name : ''} // 行尾註釋
    />
  </Nav>
);

5、樣式

儘管在大部分場景下咱們應該將樣式寫在獨立的CSS文件中，可是有時對於某個特定組件而言，其樣式至關簡單並且獨立，那麼也能夠將其直接定義在JSX中。在JSX中使用樣式和真實的樣式也很相似，經過style屬性來定義，但和真實DOM不一樣的是，屬性值不能是字符串而必須爲對象，須要注意的是屬性名一樣須要駝峯命名法。例如：

<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>

var style = {    
    color : "red",
    border : "1px solid #000"
}
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});
ReactDOM.render(<div style={style}><HelloMessage name="xiaowang" /></div>, 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官方文檔