JSX語法

如果僅僅是開發react/react-native，個人覺得，沒必要專門學習什麼是jsx，我們只需要它的一些基本的知識就足夠了。

jsx語法，一定要記住這樣的一句話，它是把HTML模板和JavaScript進行混寫的一種語法風格。使用<>來寫HTML，使用{}來寫JavaScript。jsx的基本語法規則就是：遇到HTML標籤（以 < 開頭），就用HTML規則解析，遇到程式碼塊（以 { 開頭）就用JavaScript規則解析。

比如，下面這樣就是JSX語法：

<div>{this.props.title}</div>

其中，<>中表示的都是標籤，而{}中表示的都是js。

關於jsx語法，一般在模板中可以插入變數、陣列，如果是陣列，則直接會展開陣列的成員。

模板中也可以插入函式，這個函式的返回值一般是一個變數、陣列、或者是模板。

React-native的基礎開發目錄

通過執行react-native命令列工具實現

react-native init App//構建這樣的一個專案目錄
cd App//進入到這個目錄中
react-native run-android//啟動這個專案

其中有兩個入口，一個是index.android.js，另一個是index.ios.js。分別代表著android應用入口和ios應用入口。你想實現什麼型別的App，就在什麼樣的入口檔案編寫程式碼。

//我們自己的程式碼，就寫在src的目錄下。

一個最簡單的hello world的 rn介面。

//index.android.js
import React, { Component } from 'react';
import { AppRegistry,View,Text } from 'react-native';
//class生成一個繼承自Component的元件，叫App。
class App extends Component{
    render(){
        return (
           <Text>Hello world!</Text>        
        )
    }
}
AppRegistry.registerComponent('App'
 
,()=>App);//註冊一個名字叫App的專案

如果這個示例讓你看起來陌生，那我覺得你應該瞭解一些ES6相關的知識。它有許多的新特性，如這個示例中的 import、from、class、extends、以及 ()=>{}等等。

這裡的 return 在一般函式中，會return一個變數，可以在JSX語法中，就能return一個模板。也就是 JavaScript 中嵌入HTML。

在web介面中，我們的HTML是

樣式

在 web 網頁中，樣式是使用 css 檔案，使用 class、id 等等的選擇器來寫樣式。（也有內聯樣式）。

在 react 中，它也是使用 className 的方式或者 物件 的方式來寫樣式。

在 react-native 中，樣式是使用 JavaScript 物件來表示的。

//web
<div class='container'></div>
.container{
    width:100px;
    height:100px;
}
//react
<div className="container"></div>
.container{
    width:100px;
    height:100px;
}
//react-native
<View style={style.container}></View>
const styles = StyleSheet.create({
    container:{
        width:100,
        height:100
    }
});

內聯樣式的寫法：（針對react和react-native）

<TextInput
    style={{borderRadius:Env.font.base*15}}
    placeholder='搜尋'
    underlineColorAndroid="transparent"
    onChangeText={(text)=>this.onChangeEvent(text)}
/>

這個是react（包括react-native）的內聯樣式的寫法，可以看到，有兩個{ }，其中外層的{ }代表JSX語法，而內層的{ } 代表的是物件。這就是為什麼在上面的樣式中，可以寫成 style={ styles.container } 的方式。

我們知道，在JSX語法中，{ }中可以包含一個變數，這個變數也可以是個陣列，而當我們想給react / react-native 新增多個 ‘class’或者‘樣式物件’時，我們可以使用陣列的方式，例如：

<Text style={[obj,{color: 'red'}]}>{item.carNumber}</Text>

其中：obj以及{ color: ‘red’ } 都代表樣式物件。

item.carNumber 代表JSX語法，模板中嵌入的變數。

state以及props

react中的一對非常重要的概念就是 state 和 props。
<1>state:
先看一個 state 的示例：

import React, { Component } from 'react';
import { AppRegistry,View,Text } from 'react-native';
//class生成一個繼承自Component的元件，叫App。
class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:true
        }
    }
    render(){
        return (
            <View>
                 <TouchableOpacity onPress={()=>this.setState({isShow:!this.state.isShow})}>
                       <Text>toggle<Text>
                 </TouchableOpacity>
                 {
                        this.state.isShow ? <Text>Hello world!</Text> : null
                 }
            </View>
        )
    }
}
AppRegistry.registerComponent('App',()=>App);

這個demo的功能就是：點選toggle按鈕，進行切換是否展示 hello world。

我預設大家都是新手，建議這個示例自己動手敲 3 遍以上。可以說，這個是理解 react-native 的基礎和核心內容非常重要的一個示例，不要嫌它簡單。

state：翻譯成中文叫做“狀態”，什麼是“狀態”，狀態代表了一個事物，在某些時刻是這樣的，在某些時刻是那樣的。所以，“狀態”它包含的一個重要屬性就是—可以改變。當我改變了“狀態”，頁面的展示也就改變了。

上面的三目運算子 this.state.isShow ? hello world! : null 表示：如果我的“狀態”isShow為true時，展示hello world，如果為 false 時，不展示任何東西。

<2>props:

props又是什麼？直接看一個示例:

mport React, { Component } from 'react';
import { AppRegistry,View,Text } from 'react-native';
//class生成一個繼承自Component的元件，叫App。
class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:true
        }
    }
    render(){
        return (
            <View>
                 <Child title='mapbar_front'/>
            </View>
        )
    }
}
class Child extends Component{
    render(){
       return <Text>hello,{this.props.title}</Text>
    }
}
AppRegistry.registerComponent('App',()=>App);

這個介面最終會展示：hello，mapbar_front

理解props，必須要知道的一個概念是父元件和子元件。

props：翻譯成漢語就是“屬性”，屬性的一大特點就是代表某個事物固定的，穩定的東西。它所包含的另一層含義就是–不可改變。

<3>來源：

props的來源：一般是父元件。多用於傳值或者響應事件。

state的來源：就是自身，但是可以把 props的值賦值給state。

雖然，我們自己不用父元件傳值，直接申明一個this.props.title = ‘hello’,可是我們想一想，這樣有什麼用？為什麼不用this.state.title呢？

開發react專案的一個固有思維就是—props就是用來父子元件相互通訊用的。state就是用來保持介面狀態的。其他的一切操作都是費操作，或者不規範的操作。

this.setState()函式。

如何改變state？從而使得頁面發生改變？

在react的設計中，this.setState()就是用來做這個事情的。它的引數是一個物件，用來給 state 賦值使用。

例如，上面的示例中，我們通過onPress事件，也就是web頁面的onClick事件，對state進行改變。改變的值是對this.state.isShow進行取反操作。

基本語法如下：

this.setState({
    key:value
});

其中key就是在constructor中申明的state，比如上面的isShow。

元件生命週期

元件的生命週期如下：除了常用的幾個，其他我們只需要明白他們的意思就行，什麼時候執行了哪個生命後期函式。
constructor()、componentDidMount()、componentWillUnMount()、render()這四個是經常使用的生命週期函式。）

constructor() //建構函式，比較常見的用法是，在這個函式中設定 state 。
componentWillMount() //進行一些業務的初始化的東西。

componentDidMount()//元件已經載入完成，在這個中可以進行ajax請求相關的非同步操作。

render()//介面渲染，絕對不能進行setState操作

componentWillReceiveProps()//可呼叫this.setState()更新你的元件狀態

shouldComponentUpdate()//預設情況下這個函式永遠返回true保證資料變化時候UI同步更新

componentWillUpdate()//做一些更新介面之前要做的東西

componentDidUpdate()//元件更新完畢，執行該方法

componentWillUnMount()//元件解除安裝前，通常的用法的對某些定時器的清除。

條件渲染和列表渲染

條件渲染和列表渲染是單頁面應用最常見的需求，不同的框架有不同的實現方式。比如，在angular中，使用 ng-if 來實現條件渲染。使用 ng-for 實現列表渲染。

在 react 中，是通過它自己的方式來實現條件渲染和列表渲染。這種方式是由 react 自身的特性所決定。因為JSX語法的特性，它可以使用三木運算的方式實現條件渲染，使用陣列的方式實現列表渲染。

import React, { Component } from 'react';
import { AppRegistry,View,Text } from 'react-native';
//class生成一個繼承自Component的元件，叫App。
class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:true，
            list:['China','USA','Jpan']
        }
    }
    render(){
        return (
            <View>
                 { this.state.isShow?<Text>show is true</Text>: <Text>show is false</Text>}

                 {
                         this.state.list.map((item,index) => <Text key={index}>item</Text>)
                 }
            </View>
        )
    }
}
AppRegistry.registerComponent('App',()=>App);

其中，第一個{ } 中表示條件渲染，第二個{ } 中表示列表渲染。

網路請求

在一般的web網頁中，使用ajax進行資料請求，web網頁也使用jQuery的api進行資料請求，但是在react-native中，由於jQuery使用了一些瀏覽器有的而native沒有的東西，所以react-native不使用jQuery。

fetch是react-native提倡的獲取資料請求的方式。

基本使用方式：

fetch('https://mywebsite.com/mydata.json')

fetch的第二個引數是用於定製Http請求的一些引數

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

react-native支援XMLHttpRequest物件。所以有些ajax的封裝庫是可以使用的，我們自己也可以對其進行封裝。

fetch函式返回的是個Promise物件，它有then()方法和catch()方法。then()方法接受一個攜帶回調成功返回資料的函式。catch()接受攜帶請求失敗的資訊的一個函式。

基本格式：

fetch('url').then(res => {
    return res.json()
}).then(res => {
    console.log('想要的資料：',res.data);
})