摘要：個人感覺這與中的布局文件類似。其中的會被解析。中的標(biāo)簽，由基礎(chǔ)庫提供。認(rèn)為，我們的程序是一個狀態(tài)機(jī)。支持我們更改狀態(tài)，從而引起視圖的變化。綁定事件是放在中的。事件名稱直接寫為標(biāo)簽的屬性，其值則是對應(yīng)的事件處理函數(shù)。

這一系列課程說了很多關(guān)于react-native的知識，都是有關(guān)于樣式，底層，環(huán)境等知識的，現(xiàn)在我們來學(xué)習(xí)一下reactjs的基礎(chǔ)知識。我們的代碼，我們創(chuàng)建的組件的相關(guān)知識。
歡迎大家收看react-native-android系列教程，跟著本系列教程學(xué)習(xí)，可以熟練掌握react-native-android的開發(fā)，你值得擁有：
https://segmentfault.com/blog...
回顧前幾期，我們做過了這么多實踐，是時候回過頭來看看我們寫的JS文件了。

我們書寫reactjs的時候，當(dāng)然可以使用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 (
            
                歡迎收看react-native-android系列教程
            
        );  
    }   
});
AppRegistry.registerComponent("hellowReact", () => hellowReact);

也可以使用ES6的語法，react中內(nèi)置了packager幫我們進(jìn)行轉(zhuǎn)換。
如果使用了es5的語法的話，我們可以看到，我們創(chuàng)建了一個『類』---hellowReact，確切的說，是一個組件。這個『類』必須要有一個render方法。這個render方法的返回值，指定了渲染在APP上的原生層。個人感覺這與android中的xml布局文件類似。

當(dāng)然，我們也可以像之前一樣，使用es6的語法進(jìn)行描述。使用真正的類。這里，筆者建議使用ES6的語法去書寫RN程序:

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

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

不得不說，jsx真是一個神奇的設(shè)計，在js代碼中，混入xml風(fēng)格的標(biāo)簽。剛開始接觸的話，可能你會不習(xí)慣這樣的代碼形式，但當(dāng)你習(xí)慣了這種語法之后，將浴霸不能。

class hellowReact extends Component {
    render() {
        return (
            
                歡迎收看react-native-android系列教程
            
        );  
    }   
}

從上述代碼我們可以看出，jsx中標(biāo)簽的形式與html類似，同樣也是需要嵌套的標(biāo)簽層。同樣需要閉合的標(biāo)簽。如果需要在JSX中混入js變量的話，則需要使用界符{}進(jìn)行包裹。其中的js會被解析。JSX中的標(biāo)簽，由react-native基礎(chǔ)庫提供。當(dāng)然，我們的標(biāo)簽也可以使用自己創(chuàng)建的組件。如下：

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

class hellowReact extends Component {
    render() {
        return (
            
                
            
        );  
    }   
}

這里需要注意下，文字需要包裹在Text標(biāo)簽中。標(biāo)簽開頭接受屬性。每個標(biāo)簽的樣式可以加載在自己的style屬性中。另外還需注意，我們渲染的jsx，最外層只能有一個頂級的元素進(jìn)行包裹。

上面，我們已經(jīng)說到了標(biāo)簽可以是自己創(chuàng)建的組件。我們也寫了一個簡單的組件。react中，書寫自己的組件，可以將應(yīng)用更加細(xì)化的拆分為多個模塊。便于模塊化的維護(hù)代碼。自定義的組件在渲染時，可以傳入一些屬性，在組件內(nèi)這些屬性可以被獲取，如圖3.0.1：

class Com extends Component {
    render() {
        return (
            傳過來的參數(shù)是：{this.props.param}
        );
    }
}

class hellowReact extends Component {
    render() {
        return (
            
                
            
        );  
    }   
}

圖3.0.1

其實我們在JSX中插入的是一個類名，但是在渲染的時候，會生成一個類的實例。 這里提示一下大家，類的第一個字母需要大寫，否則你會收到一個錯誤.....(如圖3.0.2)：

圖3.0.2

在網(wǎng)頁開發(fā)中，我們的思維總是自己獲取數(shù)據(jù)，自己去更改視圖。但是reactjs給我們帶來了完全不同的體驗。reactjs認(rèn)為，我們的程序是一個狀態(tài)機(jī)。reactjs為我們提供了VM層，其實我們再回頭來看看，我們在寫render函數(shù)的返回值的時候，不就已經(jīng)將我們的狀態(tài)與視圖融合在一起了嗎？

class hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "hy"
        };
    }
    render() {
        return (
            
                當(dāng)前的狀態(tài)是：{this.state.name}
            
        );  
    }   
}

上面的代碼展示了，我們將當(dāng)前組建的狀態(tài)(this.state)混入到了當(dāng)前組件的視圖中。我們在組件創(chuàng)建的時候會給定一個初始狀態(tài)(initialState)，這個狀態(tài)在getInitialState這個鉤子函數(shù)的返回值中給到組件。

reactjs支持我們更改狀態(tài)，從而引起視圖的變化。我們將上述代碼進(jìn)行改造，增加更改視圖的時機(jī)：

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 (
            
                當(dāng)前的狀態(tài)是：{this.state.name}
            
        );  
    }
}

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

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

我們看一下上面的代碼，在view點(diǎn)擊的時候，更新當(dāng)前組件的狀態(tài)。并沒有強(qiáng)制去更改狀態(tài)。但是，狀態(tài)改變了，隨即而來的就是視圖自動發(fā)生了變化，初始狀態(tài)如圖4.0.1，點(diǎn)擊后，狀態(tài)更新，視圖隨即更新至圖4.0.2：

圖4.0.1

圖4.0.2

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

不同于我們的js或者原生android，我們總是在視圖之外，在自己的邏輯代碼中，去選取特定元素，并在其上綁定事件。reactjs綁定事件是放在JSX中的。

class hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "hy"
        };
    }
    changeState() {
        this.setState({
            name: "hysg"
        });
    }
    render() {
        return (
            
                當(dāng)前的狀態(tài)是：{this.state.name}
            
        );  
    }   
};

如上，我們把TouchEnd事件綁定在了最外層的View上。事件名稱直接寫為標(biāo)簽的屬性，其值則是對應(yīng)的事件處理函數(shù)。

請注意，與react-web不同的是，事件觸發(fā)函數(shù)的上下文，默認(rèn)就是本組件。本例中，我們changeState中的this，指代的就是hellowReact的實例。

相信做前端的同學(xué)們，還是習(xí)慣了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 (
            
                測量我
            
        );  
    }   
}

這樣，點(diǎn)擊后就能測量到元素的位置啦。

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

ReactNative可以直接使用commonjs的方式去編寫模塊化的代碼，因為使用的packager打包的方式類似于webpack或者browserfy，可以通過require，導(dǎo)入模塊，可以通過exports暴露出模塊中的方法或者變量。當(dāng)然，直接使用es6 import的方式，也是可以更加方便的導(dǎo)入自己寫的模塊的。如下面的例子：

import amodule from "./amodule";
var hellowReact extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: amodule.getName()
        };
    }
    changeState() {
        this.setState({
            name: "hysg"
        });
    }
    render() {
        return (
            
                當(dāng)前的狀態(tài)是：{this.state.name}
            
        );  
    }  
}

amodule.js中的代碼如下：

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

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

本節(jié)重在基礎(chǔ)學(xué)習(xí)，所以就沒有上傳代碼例子。各位請自行敲一下上面的代碼進(jìn)行實踐。

接下來，我會和大家一起聊聊react-native的源碼編譯。另外，近期我也會開設(shè)一套react-native-ios的系列教程，不要走開，請關(guān)注我.....

如果喜歡本文請點(diǎn)擊下方的推薦哦，你的推薦會變?yōu)槲依^續(xù)更文的動力。