React-Native入門指南（六）——JSX在React-Native中的應用

React-Native入門指南

github:https://github.com/vczero/react-native-lession

React-Native:用JavaScript開發你的原生應用，釋放Native的UI體驗，體驗 Hybird開發效率。

最近一個星期寫的文章以下，連接是github page的，其實也能夠在系列博客找到相應文章：

• Lession1: Hello React-Native
• Lession2: 認識代碼結構
• Lession3: css和佈局
• Lession4: 學會React-Native佈局（一）
• Lession5: 學會React-Native佈局(二)
• Lession6: UI組件
• Lession7: JSX在React-Native中的應用

還有幾篇會時刻更新：

• Lession8: 本身動手寫組件
• Lession9: 模塊化開發
• Lession10: 搭建項目架構
• Lession11: 源碼分析

第六篇JSX在React-Native中的應用

1、JSX概述

你必定疑問爲何要用JSX？其實這不是必需，而是建議。只是由於React是做爲MVC中的V,是爲UI而生，因此，React-Native使用JSX更能像HTML樣表達樹形結構，其實HTML的超類就是XML,React-Native將這個帶到了解放前，不能否認的是JSX相比節省了不少的代碼。JSX不是什麼新奇的東西，JSX只是對JavaScript進行了拓展，僅此而已。

2、語法介紹

一、類XML UI組件表達，在React-Native中表現爲：

render: function() { return ( <View style={styles.container}>
            <Text style={styles.welcome}> Welcome to React Native!
            </Text>
        </View>
 ); }

二、js表達式
在JSX中，表達式須要｛｝包裹，例如：

render: function() { return ( <View style={styles.container}>
            <Text style={styles.welcome}> {0? '第一段': '第二段'} </Text>
        </View>
 ); }

上面的代碼咱們能夠看出，style＝｛｝是一個表達式；{0? '第一段': '第二段'}是表達式，最後顯示的應該是「第二段」。

三、屬性

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

四、若是須要在調用組件的時候動態增長或者覆蓋屬性，又該如何呢？
很簡單：<View {...props} poiname={'虹橋機場'}></View>

五、關於樣式

（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]}>

六、屬性校驗
爲了實現強類型語言的效果，咱們可使用propTypes來聲明數據屬性的合法性校驗。例如：

React.createClass({ porpTypes:{ username: React.PropTypes.string, age: React.propTypes.number, } });

七、設定默認屬性

React.createClass({ getDefaultProps: function(){ return { sign: '這個傢伙很懶，什麼都沒留下' }; } });

八、組件的生命週期
componentWillMount：組件建立以前
getInitialState：初始化狀態
render：渲染視圖
componentDidMount：渲染視圖完成後
componentWillUnmount：組件被卸載以前

3、瞭解虛擬DOM

React進行了虛擬DOM的封裝，全部的視圖的更新都是虛擬DOM作了一個校驗（diff）後最小更新。爲何這麼作，由於如今機器的內存已經足以支撐這樣視圖UI的diff計算，用內存計算換取UI渲染效率。

一、咱們須要獲取組件中真實的dom
React.findDOMNode(component)

二、第二節已經簡單說了組件的生命週期（will, did）
組件的生命週期分爲3個部分：
Mounting：正在裝載組件；
Updating：從新計算渲染組件；
Unmounting：卸載組件