React native 之ES6語法(promise,箭頭函式)
阿新 • • 發佈:2019-01-06
這裡總結幾個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還可以實現多重的連線,如上面官方網路請求的示例就是。