React Native 中常用的ES6语法

RN中ES6部分语法

ES6也就是ES2015.也叫做Harmony.
是ECMAScript的第四个版本,JavaScript是ECMAScript的一种实现.
RN使用Babel将ES6转换成ES5兼容的javascript.
下面对RN中常用的ES6的语法做个总结.

Destructuring(析构)

将数据从object中导出的简写方式.
ES5中想要导出object中的内容,要按照如下编写.

var myObj = {a:1,b:2};
var a = myObj.a;
var b = myObj.b;

使用ES6的语法,可以按照下面的方式写

var {a,b} = {a:1,b:2};

简化了代码导出时所需要写的内容.

在RN中经常会在require中使用该语法.
使用require时,实际上就是将object进行导出.

//不使用析构方式导出View组件
var React = require('react-native');
var View = React.View;

//使用析构方式导出View组件
var {View} = require('reacrt-native');

import Modules

一般我们会使用CommonJS module 语法导出组件或js模块.
在RN中,使用require导入其他的module.并通过module.export将代码导出.

//使用CommonJS的语法实现
var OtherComponent = require('./other_component');
var MyComponent = React.createClass({
    ...
});
module.exports = MyComponent;
//使用ES6的moudle 语法实现
import OtherComponent = require('./other_component');
var MyComponent = React.createClass({
    ...
});
export default MyComponent

函数缩写

//传统写法
render: function(){
    return Hi;
}

//ES6的缩写方式
render(){
    return Hi;
}

Fat Arrow 方法

在js中,我们经常需要将函数绑定到指定的context.
在ES6中可以使用fat arrow来自动对context进行绑定.

//ES5中实现函数绑定的方式
var callbackFunc = function(val){
    console.log('Do something');
}.bind(this);

//ES6中的fat arrow的方式实现
var callbackFunc = (val)=>{
    console.log('Do something');
}

String Interpolation(string 模板)

ES5中如果需要将string进行拼接,需要直接将字符串相加.
es6中支持模板式的写法来实现该功能.

//ES5的写法
var API_KEY = '1234fafwa';
var url = 'http://someapi.com/request&key=' + API_KEY;

//使用ES6的模板string的写法
var API_KEY = '1234fafwa';
var url = `http://someapi.com/request&key=${API_KEY}`;