《ReactNative系列講義》基礎篇---01.JSX

| 版權聲明：本文爲博主原創文章，未經博主允許不得轉載。

一、簡介

JSX屬於React的基礎概念，是JavaScript的延伸部分，正是JSX創造了React的元素。通俗的來講，JSX類似於Web端的DIV等標籤，用來描述UI該是什麼樣子。但是和HTML還是有一些差別的，因此我們需要重新來學一下這門新的標籤語言，如果有熟悉HTML標籤語言的朋友可以在學習JSX時類比一下HTML，看看到底有什麼不一樣。

二、基礎概念

JSX有四大特性：

1. 通過大括號{}，JSX中可嵌入任何的JS表達式

示例：

const user = {
    firstName: 'lucky'
    ,lastName: 'fang'
}

formatName = (user) => {
    return user.firstName + user.lastName
}

// JSX中嵌入JS表達式
const element = (
    <View>
        <Text>Hello, {this.formatName(user)}</Text>
    </View>
);

2. JSX編譯後可變成JS的對象（也就是說JSX也是表達式，可以嵌入到JS表達式中）

幾種情況：可以在if狀態判斷和for循環中、分配給變量、以參數的形式接收、通過函數返回出去。

示例：

// 在狀態判斷中使用，並將結果返回出去
visitor = (user) => {
    if(user) {
        return (
            <View>
                <Text>Hello, {this.formatName(user)}!</Text>
            </View>     
        );
    }

    return (
        <View>
            <Text>Hello, Stranger.</Text>
        </View>
    );
}

3. JSX標籤中可嵌入特殊屬性

例如：
<View>標籤中可加入style屬性，用來定義視圖的樣式

<View style={{ width:100, height:100 }}></View>

<Image/>標籤中可加入src屬性，用來引入呈現的圖片地址，也可加入style屬性，用來定義圖片樣式

<Image source={require('./img/favicon.png')}/>

內容可包裹在單引號中，也可放在對象中

<Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>

<Image source={{uri: user.avator}}/>

4. JSX標籤之間可進行嵌套

例如文章上面的Demo中，<View>標籤中嵌套了<Text>標籤，一般情況下<View>標籤用來控制視圖的樣式，<Text>標籤用來控制文字的樣式

<View>
    <Text>Hello, ReactNative</Text>
    <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}}/>
</View>

5. JSX防止注入攻擊

默認情況下，React在渲染UI時不會嵌入任何的數據。任何數據再被渲染之前都會被轉換成字符串。（注：我理解的也很模糊）

三、總結

以上只是JSX語言的基本特性，在今後的學習中，我們還會遇到更多類型的標籤，也會講到JSX標籤佈局的FlexBox思想。下節課我們一起來學習一下React中的數據類型。