React Native 中的JSX學習

ZY_FlyWay發表於2017-08-01
React NativeJS

JSX是什麼

字面上來看JSX即 JavaScript XML取首字母結合，所以JSX並不是一門新語言，僅僅是個語法糖。

React發明了JSX，利用HTML語法來建立虛擬DOM。當遇到<，JSX就當HTML解析，遇到{就當JavaScript解析。

我們在瀏覽器執行的時候，JSX語法會通過Babel轉換成瀏覽器認識的JS。

Babel：我們裝RN的時候你會再目錄看到很多Babel資料夾，JSX語法依賴於Babel進行解析翻譯。


那麼問題來了，這種虛擬DOM的方式會不會影響效能呢。

答案肯定是不會的，反而會比我們操作DOM效能更好，其實我們也可以自己用JS寫一個虛擬DOM，一般水平有限的寫還是有困難的，就算寫出來，也不一定有別人的效能強，React 虛擬DOM用了Diff演算法，降低了頻發而發展的操作DOM，所以效能是增強的。


JSX的優點：

1☞類XML語法，容易擴充套件。
2☞增強JS語義
3☞結構清晰
4☞抽象程度高
5☞程式碼模組化

JSX在React Native

 該文章主要介紹JSX在React Native 中的實際使用，沒有詳細介紹JSX語法。

注意：demo中所有函式應寫在class內。

1.JSX 中嵌入變數，表示式，樣式

   這段Demo在標籤裡嵌入了變數，表示式和樣式兩種寫法
var testName  =  'zzy';

render() {

    return(
        return(
        <View style={styles.container}>
         <Text>    
          {testName}
         </Text>
          <Text style={{marginTop:20}}>    
          {'這是一個表示式:'+ (5+3)}
         </Text>
        </View>
      );
      );
    }

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});




2.函式呼叫

函式和JS函式寫法是一樣的格式如下：
 
funcName (引數){實現內容}

需要注意RN 標籤中的函式呼叫，簡要的說下載render()函式中的呼叫規則。

①.如果你需要在render中直接呼叫的話和普通js呼叫規則相同。如下面的例子：

render() {
    this.testFunc()
}

testFunc(){
      alert('我不需要框框');
}


②.如果您在render中直接呼叫函式得到標籤去搭建介面的話。如下面的例子:
render() {
      return this.renderLoadingView();
}

 renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading movies...
        </Text>
      </View>
    );
  }

③.如果需要迴圈建立頁面，render中的標籤下面呼叫的話你需要在{}中呼叫函式,如下面的例子:

var heros =  ['yasuo','ruiwen','liqing'];

render() {
      return(
        <View style={styles.container}>
            {this.renderLoadForView()}
        </View>
      );
}

 renderLoadForView(){
    var forView = [];
    for (var i = 0; i < heros.length; i++) {
      forView.push(
        <Text key={i}>
           {heros[i]}
        </Text>
      );
    }
    return forView;
  }


3. render中渲染固定標籤陣列，如下面的例子:

render() {
      return(
        <View style={styles.container}>
            {this.loadArrayView()}
        </View>
      );
}

loadArrayView(){
  return(
     [
       <Text key={1}>
           陣列1
        </Text>,
         <Text key={2}>
          陣列2
        </Text>
     ]
  );
}




總結

 JSX語法可以當做加強版的JS，在React中使用，依賴Babel編譯。
 JSX最明顯的特點就是可以在JS中寫標籤，並不用加引號，在標籤裡使用JS變數也十分方便 ，在標籤裡當遇到{}當做JS解析。
 JSX在ReactNative還有很多特點，今後慢慢的探究，學習消化。

相關文章