## 第六篇JSX在React-Native中的應用
### 一、JSX概述
你一定疑問為什么要用JSX？其實這不是必需，而是建議。只是因為React是作為MVC中的V,是為UI而生，所以，React-Native使用JSX更能像HTML樣表達樹形結構，其實HTML的超類就是XML,React-Native將這個帶到了解放前，不可否認的是JSX相比節省了很多的代碼。JSX不是什么新奇的東西，JSX只是對JavaScript進行了拓展，僅此而已。
### 二、語法介紹
1、類XML UI組件表達，在React-Native中表現為：
~~~
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
</View>
);
}
~~~
2、js表達式
在JSX中，表達式需要｛｝包裹，例如：
~~~
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
{0? '第一段': '第二段'}
</Text>
</View>
);
}
~~~
上面的代碼我們可以看出，style＝｛｝是一個表達式；{0? '第一段': '第二段'}是表達式，最后顯示的應該是“第二段”。
3、屬性
在HTML中，屬性可以是任何值，例如：<div tagid="00_1"></div>,tagid就是屬性；同樣，在組件上可以使用屬性。
建議使用以下方式：
~~~
var props = {
tagid: 'GGFSJGFFATQ',
poiname: '東方明珠'
};
return (<View {...props}></View>);
~~~
4、如果需要在調用組件的時候動態增加或者覆蓋屬性，又該如何呢？
很簡單：<View {...props} poiname={'虹橋機場'}></View>
5、關于樣式
（1）普通內聯樣式:{{}},第一層｛｝是表達式，第二層｛｝是js對象；
<View style={{fontSize:40, width:80,}}> </View>
（2）調用樣式表:{樣式類.屬性}
<View style={styles.container}></View>
（3）樣式表和內聯樣式共存:{[]}
<View style={[styles.container, {fontSize:40, width:80}]}>
（4）多個樣式表:{[樣式類1， 樣式類2]}
<View style={[styles.container, styles.color]}>
6、屬性校驗
為了實現強類型語言的效果，我們可以使用propTypes來聲明數據屬性的合法性校驗。例如：
~~~
React.createClass({
porpTypes:{
username: React.PropTypes.string,
age: React.propTypes.number,
}
});
~~~
7、設定默認屬性
~~~
React.createClass({
getDefaultProps: function(){
return {
sign: '這個家伙很懶，什么都沒留下'
};
}
});
~~~
8、組件的生命周期
componentWillMount：組件創建之前
getInitialState：初始化狀態
render：渲染視圖
componentDidMount：渲染視圖完成后
componentWillUnmount：組件被卸載之前
### 三、了解虛擬DOM
React進行了虛擬DOM的封裝，所有的視圖的更新都是虛擬DOM做了一個校驗（diff）后最小更新。為什么這么做，因為現在機器的內存已經足以支撐這樣視圖UI的diff計算，用內存計算換取UI渲染效率。
1、我們需要獲取組件中真實的dom
React.findDOMNode(component)
2、第二節已經簡單說了組件的生命周期（will, did）
組件的生命周期分為3個部分：
Mounting：正在裝載組件；
Updating：重新計算渲染組件；
Unmounting：卸載組件
