摘要：個人感覺這與中的布局文件類似。其中的會被解析。中的標簽，由基礎庫提供。認為，我們的程序是一個狀態機。支持我們更改狀態，從而引起視圖的變化。綁定事件是放在中的。事件名稱直接寫為標簽的屬性，其值則是對應的事件處理函數。

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

我們書寫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 (
            
                歡迎收看react-native-android系列教程
            
        );  
    }   
});
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 (
            
                歡迎收看react-native-android系列教程
            
        );  
    }   
}
AppRegistry.registerComponent("hellowReact", () => hellowReact);

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

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

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

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

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

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

上面，我們已經說到了標簽可以是自己創建的組件。我們也寫了一個簡單的組件。react中，書寫自己的組件，可以將應用更加細化的拆分為多個模塊。便于模塊化的維護代碼。自定義的組件在渲染時，可以傳入一些屬性，在組件內這些屬性可以被獲取，如圖3.0.1：

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

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

圖3.0.1

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

圖3.0.2

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

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

上面的代碼展示了，我們將當前組建的狀態(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 (
            
                當前的狀態是：{this.state.name}
            
        );  
    }
}

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非常特別的思想。

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

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

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

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

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

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

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

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

amodule.js中的代碼如下：

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

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

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

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

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