《React Native移動開發實戰》一一2.3 React Native的JSX解決方案

2.3 react native的jsx解決方案

jsx并不是一門新的開發語言，而是facebook提出的文法方案：一種可以在javascript代碼中直接書寫html标簽的文法糖，是以，jsx本質上還是javascript語言。

在react和react native開發中，不一定非要使用jsx，也可以直接使用javascript進行開發。但是，強烈建議讀者使用jsx！因為jsx在定義類似html這種樹形結構時，簡單明了，極大地提高了開發和維護的效率。

下面以1.4節第一個react native應用中的代碼為例：

01 export default class ch02 extends component { // 每個頁面可以了解成一個元件

02 render() { // 渲染頁面的函數

03 return (

04 // 頁面根view

05

06 welcome to react native!

07

08

09 to get started, edit index.ios.js

10

11

12 press cmd+r to reload,{'n'}

13 cmd+d or shake for dev menu

14

15

16 );

17 }

16 }

在上述代碼中，元件的render()方法函數是用于渲染頁面的，它的傳回值是一個view的對象，但是為什麼沒有發現建立對象和設定屬性的代碼呢？原來，jsxtransformer幫我們把代碼中xml-like文法編譯轉換成真實可用的javascript代碼，它不僅僅建立view對象、設定view樣式和布局，同時更加貼心的是，還建構了view之間的樹形結構。例如，上述例子中的樹形結構是這樣的：

root view (style container)

---- sub text 1 (style welcome)

---- sub text 2 (style instructions)

---- sub text 3 (style instructions)