React-Native入門指南

第六篇JSX在React-Native中的應(yīng)用

一、JSX概述

你一定疑問為什么要用JSX？其實這不是必需，而是建議。只是因為React是作為MVC中的V,是為UI而生，所以，React-Native使用JSX更能像HTML樣表達(dá)樹形結(jié)構(gòu)，其實HTML的超類就是XML,React-Native將這個帶到了解放前，不可否認(rèn)的是JSX相比節(jié)省了很多的代碼。JSX不是什么新奇的東西，JSX只是對JavaScript進(jìn)行了拓展，僅此而已。

二、語法介紹

1、類XML UI組件表達(dá)，在React-Native中表現(xiàn)為：
render: function() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                Welcome to React Native!
            </Text>
        </View>
    );
}

2、js表達(dá)式
在JSX中，表達(dá)式需要｛｝包裹，例如：
render: function() {
    return (
        <View style={styles.container}>
            <Text style={styles.welcome}>
                {0? '第一段': '第二段'}
            </Text>
        </View>
    );
}
上面的代碼我們可以看出，style＝｛｝是一個表達(dá)式；{0? '第一段': '第二段'}是表達(dá)式，最后顯示的應(yīng)該是“第二段”。

3、屬性
在HTML中，屬性可以是任何值，例如：<div tagid="00_1"></div>,tagid就是屬性；同樣，在組件上可以使用屬性。
建議使用以下方式：
var props = {
    tagid: 'GGFSJGFFATQ',
    poiname: '東方明珠'
};
return (<View {...props}></View>);

4、如果需要在調(diào)用組件的時候動態(tài)增加或者覆蓋屬性，又該如何呢？
很簡單：<View {...props} poiname={'虹橋機(jī)場'}></View>

5、關(guān)于樣式
（1）普通內(nèi)聯(lián)樣式:{{}},第一層｛｝是表達(dá)式，第二層｛｝是js對象；
<View style={{fontSize:40, width:80,}}> </View>
（2）調(diào)用樣式表:{樣式類.屬性}
<View style={styles.container}></View>
（3）樣式表和內(nèi)聯(lián)樣式共存:{[]}
<View style={[styles.container, {fontSize:40, width:80}]}>
（4）多個樣式表:{[樣式類1， 樣式類2]}
<View style={[styles.container, styles.color]}>

6、屬性校驗
為了實現(xiàn)強(qiáng)類型語言的效果，我們可以使用propTypes來聲明數(shù)據(jù)屬性的合法性校驗。例如：
React.createClass({
    porpTypes:{
        username: React.PropTypes.string,
        age: React.propTypes.number,
    }
});

7、設(shè)定默認(rèn)屬性
React.createClass({
    getDefaultProps: function(){
        return {
            sign: '這個家伙很懶，什么都沒留下'
        };
    }
});

8、組件的生命周期
componentWillMount：組件創(chuàng)建之前
getInitialState：初始化狀態(tài)
render：渲染視圖
componentDidMount：渲染視圖完成后
componentWillUnmount：組件被卸載之前

三、了解虛擬DOM

React進(jìn)行了虛擬DOM的封裝，所有的視圖的更新都是虛擬DOM做了一個校驗（diff）后最小更新。為什么這么做，因為現(xiàn)在機(jī)器的內(nèi)存已經(jīng)足以支撐這樣視圖UI的diff計算，用內(nèi)存計算換取UI渲染效率。

1、我們需要獲取組件中真實的dom
React.findDOMNode(component)

2、第二節(jié)已經(jīng)簡單說了組件的生命周期（will, did）
組件的生命周期分為3個部分：
Mounting：正在裝載組件；
Updating：重新計算渲染組件；
Unmounting：卸載組件