1. 程式人生 > >React native 之ES6語法(promise,箭頭函式)

React native 之ES6語法(promise,箭頭函式)

這裡總結幾個ES6與ES5區別中常用的幾塊。

一、箭頭函式

ES6中提供了使用(=>)符號來定義函式。
箭頭函式是用箭頭符號在需要回調函式的地方之間定義不需要名稱,程式碼簡潔。
將需要的引數放在=>前的()中即可,=>後就是函式體,就可以使用傳入的引數。
如:

var function = ()=>...;//這個是不需要引數的情況下
var function = (param) => param...;//一個引數的情況下,
var function =(param1,param2)=>param1+param2;//引數多於一個的時候的情況

在實際開發中如:

......
myFunction(text){
    //拿到textinput輸入的值做處理
}
render(){
    return(
        <TextInput
            ...
            onChangeText = {
                (text) =>this.myFunction(text)
            }
       />
    );
}
......

上面這種寫法onChangeText = { (text) =>this.myFunction(text)}還可以改為
onChangeText = { this.myFunction},這種寫法引數也可以傳遞,就是我們無法從程式碼看出引數的傳遞,實際也是傳遞過來了。但是不能寫成onChangeText ={this.myFunction(text)},這樣寫就是錯的。

二、map使用

示例:

var dataMap = [1,2,3,4];
var arr = dataMap.map(
(item) =>{
        return item*item;
    }
);//生成的arr是[1,4,9,16]

三、promise機制

一個promise代表著一個非同步任務的結果,非同步任務結束後一般我們都會寫有回撥函式,來看任務是成功還是失敗。promise機制就是讓這個處理更簡單。
如我們總常用的網路請求,
看下官網的示例:

fetch('https://mywebsite.com/endpoint.php')
  .then
((response) => response.text()) .then((responseText) => { console.log(responseText); }) .catch((error) => { console.warn(error); });

在promise沒推出前我們可能是這樣寫一個非同步處理:

onSuccess(){
    //操作成功
}
onFailed(){
    //操作失敗
}

try{
    this.myFunction(param,this.onSuccess,this.onFailed)//onSuccess、onfailed是寫的兩個回撥方法
}catch(error){
    ......
}

promise推出後上面的程式碼就可以改成:

    this.myFunction(param).then(
    (response)=>{
        //response是成功返回的值
    }).catch(error)=>{
                    //失敗或者出現異常返回的結果,在這個地方處理
                }
    )

promise還可以實現多重的連線,如上面官方網路請求的示例就是。