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 <TEXT>Hi</TEXT>;
}
//ES6的缩写方式
render(){
return <TEXT>Hi</TEXT>;
}
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}`;
