[React Native Android 安利系列]ReactNative中的reactjs基礎

這一系列課程說了不少關於react-native的知識，都是有關於樣式，底層，環境等知識的，如今咱們來學習一下reactjs的基礎知識。咱們的代碼，咱們建立的組件的相關知識。
歡迎你們收看react-native-android系列教程，跟着本系列教程學習，能夠熟練掌握react-native-android的開發，你值得擁有：
https://segmentfault.com/blog...
回顧前幾期，咱們作過了這麼多實踐，是時候回過頭來看看咱們寫的JS文件了。

1. 語法

咱們書寫reactjs的時候，固然可使用ES5的語法。

var reactNative = require('react-native');
var React = require('react');
var View = reactNative.View;
var Text = reactNative.Text;
var StyleSheet = reactNative.StyleSheet;
var AppRegistry = reactNative.AppRegistry;

var hellowReact = React.createClass({
    render: function () {
        return (
            <View>
                <Text>歡迎收看react-native-android系列教程</Text>
            </View>
        );  
    }   
});
AppRegistry.registerComponent('hellowReact', () => hellowReact);

也可使用ES6的語法，react中內置了packager幫咱們進行轉換。
若是使用了es5的語法的話，咱們能夠看到，咱們建立了一個『類』---hellowReact，確切的說，是一個組件。這個『類』必需要有一個render方法。這個render方法的返回值，指定了渲染在APP上的原生層。我的感受這與android中的xml佈局文件相似。

固然，咱們也能夠像以前同樣，使用es6的語法進行描述。使用真正的類。這裏，筆者建議使用ES6的語法去書寫RN程序:

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    AppRegistry 
} from 'react-native';

class hellowReact extends Component {
    render() {
        return (
            <View>
                <Text>歡迎收看react-native-android系列教程</Text>
            </View>
        );  
    }   
}
AppRegistry.registerComponent('hellowReact', () => hellowReact);

2. JSX

不得不說，jsx真是一個神奇的設計，在js代碼中，混入xml風格的標籤。剛開始接觸的話，可能你會不習慣這樣的代碼形式，但當你習慣了這種語法以後，將浴霸不能。

class hellowReact extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text>歡迎收看react-native-android系列教程</Text>
            </View>
        );  
    }   
}

從上述代碼咱們能夠看出，jsx中標籤的形式與html相似，一樣也是須要嵌套的標籤層。一樣須要閉合的標籤。若是須要在JSX中混入js變量的話，則須要使用界符{}進行包裹。其中的js會被解析。JSX中的標籤，由react-native基礎庫提供。固然，咱們的標籤也可使用本身建立的組件。以下：

class Com extends Component {
    render() {
        return (
            <Text>歡迎收看react-native-android系列教程</Text>
        );  
    }   
}

class hellowReact extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Com />
            </View>
        );  
    }   
}

這裏須要注意下，文字須要包裹在Text標籤中。標籤開頭接受屬性。每一個標籤的樣式能夠加載在本身的style屬性中。另外還需注意，咱們渲染的jsx，最外層只能有一個頂級的元素進行包裹。

3. 組件

上面，咱們已經說到了標籤能夠是本身建立的組件。咱們也寫了一個簡單的組件。react中，書寫本身的組件，能夠將應用更加細化的拆分爲多個模塊。便於模塊化的維護代碼。自定義的組件在渲染時，能夠傳入一些屬性，在組件內這些屬性能夠被獲取，如圖3.0.1：

class Com extends Component {
    render() {
        return (
            <Text>傳過來的參數是：{this.props.param}</Text>
        );
    }
}

class hellowReact extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Com param={'我是傳入的參數!'} />
            </View>
        );  
    }   
}

圖3.0.1

其實咱們在JSX中插入的是一個類名，可是在渲染的時候，會生成一個類的實例。 這裏提示一下你們，類的第一個字母須要大寫，不然你會收到一個錯誤.....(如圖3.0.2)：

圖3.0.2

4 狀態與更新

在網頁開發中，咱們的思惟老是本身獲取數據，本身去更改視圖。可是reactjs給咱們帶來了徹底不一樣的體驗。reactjs認爲，咱們的程序是一個狀態機。reactjs爲咱們提供了VM層，其實咱們再回頭來看看，咱們在寫render函數的返回值的時候，不就已經將咱們的狀態與視圖融合在一塊兒了嗎？

class hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'hy'
        };
    }
    render() {
        return (
            <View style={styles.container}>
                <Text>當前的狀態是：{this.state.name}</Text>
            </View>
        );  
    }   
}

上面的代碼展現了，咱們將當前組建的狀態(this.state)混入到了當前組件的視圖中。咱們在組件建立的時候會給定一個初始狀態(initialState)，這個狀態在getInitialState這個鉤子函數的返回值中給到組件。

reactjs支持咱們更改狀態，從而引發視圖的變化。咱們將上述代碼進行改造，增長更改視圖的時機：

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    AppRegistry 
} from 'react-native';

class hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'hy'
        };
    }
    changeState() {
        this.setState({
            name: 'hysg'
        });
    }
    render() {
        return (
            <View style={styles.container} onTouchEnd={this.changeState.bind(this)}>
                <Text>當前的狀態是：{this.state.name}</Text>
            </View>
        );  
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'flex-start',
        backgroundColor: '#fff',
    },
});

AppRegistry.registerComponent('hellowReact', () => hellowReact);

咱們看一下上面的代碼，在view點擊的時候，更新當前組件的狀態。並無強制去更改狀態。可是，狀態改變了，隨即而來的就是視圖自動發生了變化，初始狀態如圖4.0.1，點擊後，狀態更新，視圖隨即更新至圖4.0.2：

圖4.0.1

圖4.0.2

其實咱們也能猜到，setState方法，最終就是再次調用render，可是其中會有一些特殊的處理。不過，從上述代碼的角度看來，咱們只是更改了狀態(調用了setState)，最終引發了視圖的變化，這就是reactjs很是特別的思想。

5 事件的綁定

不一樣於咱們的js或者原生android，咱們老是在視圖以外，在本身的邏輯代碼中，去選取特定元素，並在其上綁定事件。reactjs綁定事件是放在JSX中的。

class hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'hy'
        };
    }
    changeState() {
        this.setState({
            name: 'hysg'
        });
    }
    render() {
        return (
            <View style={styles.container} onTouchEnd={this.changeState}>
                <Text>當前的狀態是：{this.state.name}</Text>
            </View>
        );  
    }   
};

如上，咱們把TouchEnd事件綁定在了最外層的View上。事件名稱直接寫爲標籤的屬性，其值則是對應的事件處理函數。

請注意，與react-web不一樣的是，事件觸發函數的上下文，默認就是本組件。本例中，咱們changeState中的this，指代的就是hellowReact的實例。

6 獲取元素

相信作前端的同窗們，仍是習慣了jQuery的模式，用選擇器去選擇DOM，並操做。可是對於React來說，平時使用state與jsx更新視圖就夠了。雖然RN不是DOM，沒有選擇器去選取DOM，可是咱們仍是免不了要去獲取元素。這時就得使用"對組建的引用---refs屬性"了。
舉個簡單的例子，咱們要獲取一個元素並測量一個這個元素在頁面上的位置與長度&寬度，咱們就要使用refs，先來獲取到那個元素，再來測量了：

class hellowReact extends Component {
    getPos() {
        this.refs.measureme
        .measure((fx, fy, width, height, px, py) => {
            console.log('個人位置是：', 'x:', fx, 'y:', fy);
        });
    }
    render() {
        return (
            <View onTouchEnd={this.getPos}>
                <Text ref={"measureme"}>測量我</Text>
            </View>
        );  
    }   
}

這樣，點擊後就能測量到元素的位置啦。

7 全局對象

在reactNative中，引用全局對象可使用window或者global，它們都指向一個對象--DedicatedWorkerGlobalScope，其中有jscore提供的方法，也有reactnative注入的方法。咱們以後會詳細講解react注入的方法。

8 模塊化

ReactNative能夠直接使用commonjs的方式去編寫模塊化的代碼，由於使用的packager打包的方式相似於webpack或者browserfy，能夠經過require，導入模塊，能夠經過exports暴露出模塊中的方法或者變量。固然，直接使用es6 import的方式，也是能夠更加方便的導入本身寫的模塊的。以下面的例子：

import amodule from './amodule';
var hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: amodule.getName()
        };
    }
    changeState() {
        this.setState({
            name: 'hysg'
        });
    }
    render() {
        return (
            <View style={styles.container} onTouchEnd={this.changeState}>
                <Text>當前的狀態是：{this.state.name}</Text>
            </View>
        );  
    }  
}

amodule.js中的代碼以下：

export default function () {
    return 'hy';
}

不過切記一個模塊是一個單例。

9 課後做業

本節重在基礎學習，因此就沒有上傳代碼例子。各位請自行敲一下上面的代碼進行實踐。

接下來，我會和你們一塊兒聊聊react-native的源碼編譯。另外，近期我也會開設一套react-native-ios的系列教程，不要走開，請關注我.....

若是喜歡本文請點擊下方的推薦哦，你的推薦會變爲我繼續更文的動力。