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

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

我們書寫reactjs的時(shí)候，當(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)建了一個(gè)『類』---hellowReact，確切的說，是一個(gè)組件。這個(gè)『類』必須要有一個(gè)render方法。這個(gè)render方法的返回值，指定了渲染在APP上的原生層。個(gè)人感覺這與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真是一個(gè)神奇的設(shè)計(jì)，在js代碼中，混入xml風(fēng)格的標(biāo)簽。剛開始接觸的話，可能你會(huì)不習(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會(huì)被解析。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)簽開頭接受屬性。每個(gè)標(biāo)簽的樣式可以加載在自己的style屬性中。另外還需注意，我們渲染的jsx，最外層只能有一個(gè)頂級(jí)的元素進(jìn)行包裹。

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

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

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

圖3.0.1

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

圖3.0.2

在網(wǎng)頁開發(fā)中，我們的思維總是自己獲取數(shù)據(jù)，自己去更改視圖。但是reactjs給我們帶來了完全不同的體驗(yàn)。reactjs認(rèn)為，我們的程序是一個(gè)狀態(tài)機(jī)。reactjs為我們提供了VM層，其實(shí)我們?cè)倩仡^來看看，我們?cè)趯憆ender函數(shù)的返回值的時(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)前組件的視圖中。我們?cè)诮M件創(chuàng)建的時(shí)候會(huì)給定一個(gè)初始狀態(tài)(initialState)，這個(gè)狀態(tài)在getInitialState這個(gè)鉤子函數(shù)的返回值中給到組件。

reactjs支持我們更改狀態(tài)，從而引起視圖的變化。我們將上述代碼進(jìn)行改造，增加更改視圖的時(shí)機(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)擊的時(shí)候，更新當(dāng)前組件的狀態(tài)。并沒有強(qiáng)制去更改狀態(tài)。但是，狀態(tài)改變了，隨即而來的就是視圖自動(dòng)發(fā)生了變化，初始狀態(tài)如圖4.0.1，點(diǎn)擊后，狀態(tài)更新，視圖隨即更新至圖4.0.2：

圖4.0.1

圖4.0.2

其實(shí)我們也能猜到，setState方法，最終就是再次調(diào)用render，但是其中會(huì)有一些特殊的處理。不過，從上述代碼的角度看來，我們只是更改了狀態(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)簽的屬性，其值則是對(duì)應(yīng)的事件處理函數(shù)。

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

相信做前端的同學(xué)們，還是習(xí)慣了jQuery的模式，用選擇器去選擇DOM，并操作。但是對(duì)于React來講，平時(shí)使用state與jsx更新視圖就夠了。雖然RN不是DOM，沒有選擇器去選取DOM，但是我們還是免不了要去獲取元素。這時(shí)就得使用"對(duì)組建的引用---refs屬性"了。
舉個(gè)簡(jiǎn)單的例子，我們要獲取一個(gè)元素并測(cè)量一個(gè)這個(gè)元素在頁面上的位置與長(zhǎng)度&寬度，我們就要使用refs，先來獲取到那個(gè)元素，再來測(cè)量了：

class hellowReact extends Component {
    getPos() {
        this.refs.measureme
        .measure((fx, fy, width, height, px, py) => {
            console.log("我的位置是：", "x:", fx, "y:", fy);
        });
    }
    render() {
        return (
            
                測(cè)量我
            
        );  
    }   
}

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

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

ReactNative可以直接使用commonjs的方式去編寫模塊化的代碼，因?yàn)槭褂玫膒ackager打包的方式類似于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";
}

不過切記一個(gè)模塊是一個(gè)單例。

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

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

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