深入浅析react native es6语法
reactnative是直接使用es6来编写代码，许多新语法能提高我们的工作效率
解构赋值
var{
StyleSheet,Text,View
}=React;
这句代码是ES6中新增的解构(Destructuring)赋值语句。准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量。
上面的代码等价于：
varStyleSheet=React.StyleSheet; varText=React.Text; varView=React.View
再看几个例子，以前，为变量赋值，只能直接指定值:
vara=1; varb=2; varc=3;
而ES6允许这样写：
var[a,b,c]=[1,2,3];
更详细的内容可参看：变量的解构赋值
箭头函数
ReactNative里面经常会出现类似的代码:
ES6中新增的箭头操作符=>简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs
举几个栗子感受下：
vararray=[1,2,3];
//传统写法
array.forEach(function(v,i,a){
console.log(v);
});
//ES6
array.forEach(v=>console.log(v));
varsum=(num1,num2)=>{returnnum1+num2;}
//等同于：
varsum=function(num1,num2){
returnnum1+num2;
};
更多详细内容请自行Google，或查看：https://www.imququ.com/post/arrow-function-in-es6.html
延展操作符(Spreadoperator)
这个…操作符（也被叫做延展操作符－spreadoperator）已经被ES6数组支持。它允许传递数组或者类数组直接做为函数的参数而不用通过apply。
varpeople=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖，人二和人三
functionsayHello(people1,people2,people3){
console.log(`Hello${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);//输出：HelloWayou,John,Sherlock
//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
sayHello.apply(null,people);//输出：HelloWayou,John,Sherlock
而在React中，延展操作符一般用于属性的批量赋值上。在JSX中，可以使用…运算符，表示将一个对象的键值对与ReactElement的props属性合并。
varprops={};
props.foo=x;
props.bar=y;
varcomponent=<Component{...props}/>;
//等价于
varprops={};
props.foo=x;
props.bar=y;
varcomponent=<Componentfoo={x}bar={y}/>;
它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：
JavaScript
varprops={foo:'default'};
varcomponent=<Component{...props}foo={'override'}/>;
console.log(component.props.foo);//'override'
更多详细信息：https://facebook.github.io/react/docs/jsx-spread.html
class
ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。
classPropertyViewextendsComponent{
render(){
return(
<View></View>
)
}
}
//等价于
varPropertyView=React.createClass({
render(){
return(
<View></View>
)
}
})
方法定义(methoddefinition)
ECMAScript6中,引入了一种名叫方法定义(methoddefinition)的新语法糖,相对于以前的完整写法,这种简写形式可以让你少写一个function键字.
React.createClass({
render(){
return(
<View></View>
)
}
})
//等价于
React.createClass({
render:function(){
return(
<View></View>
)
}
})
最后，推荐一个ES6的PPT，写得不错：http://khan4019.github.io/ES6/
reactnative是直接使用es6来编写代码，许多新语法能提高我们的工作效率
解构赋值
var{
StyleSheet,
Text,
View
}=React;
这句代码是ES6中新增的解构(Destructuring)赋值语句。准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量。
上面的代码等价于：
varStyleSheet=React.StyleSheet; varText=React.Text; varView=React.View
再看几个例子，以前，为变量赋值，只能直接指定值:
vara=; varb=; varc=;
而ES允许这样写：
var[a,b,c]=[,,];
更详细的内容可参看：变量的解构赋值
箭头函数
ReactNative里面经常会出现类似的代码:
ES6中新增的箭头操作符=>简化了函数的书写。操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs
举几个栗子感受下：
vararray=[,,];
//传统写法
array.forEach(function(v,i,a){
console.log(v);
});
//ES
array.forEach(v=>console.log(v));
varsum=(num,num)=>{returnnum+num;}
//等同于：
varsum=function(num,num){
returnnum+num;
};
更多详细内容请自行Google，或查看：https://www.imququ.com/post/arrow-function-in-es6.html
延展操作符(Spreadoperator)
这个…操作符（也被叫做延展操作符－spreadoperator）已经被ES6数组支持。它允许传递数组或者类数组直接做为函数的参数而不用通过apply。
varpeople=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖，人二和人三
functionsayHello(people,people,people){
console.log(Hello${people},${people},${people});
}
//但是我们将一个数组以拓展参数的形式传递，它能很好地映射到每个单独的参数
sayHello(...people);
//输出：HelloWayou,John,Sherlock
//而在以前，如果需要传递数组当参数，我们需要使用函数的apply方法
sayHello.apply(null,people);
//输出：HelloWayou,John,Sherlock
而在React中，延展操作符一般用于属性的批量赋值上。在JSX中，可以使用…运算符，表示将一个对象的键值对与ReactElement的props属性合并。
varprops={};
props.foo=x;
props.bar=y;
varcomponent=<Component{...props}/>;
//等价于
varprops={};
props.foo=x;
props.bar=y;
varcomponent=<Componentfoo={x}bar={y}/>;
它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：
varprops={foo:'default'};
varcomponent=<Component{...props}foo={'override'}/>;
console.log(component.props.foo);
//'override'
更多详细信息：https://facebook.github.io/react/docs/jsx-spread.html
class
ES6中添加了对类的支持，引入了class关键字（其实class在JavaScript中一直是保留字，目的就是考虑到可能在以后的新版本中会用到，现在终于派上用场了）。JS本身就是面向对象的，ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后，对象的创建，继承更加直观了，并且父类方法的调用，实例化，静态方法和构造函数等概念都更加形象化。
classPropertyViewextendsComponent{
render(){
return(
<View></View>
)
}
}
//等价于
varPropertyView=React.createClass({
render(){
return(
<View></View>
)
}
})
方法定义(methoddefinition)
ECMAScript6中,引入了一种名叫方法定义(methoddefinition)的新语法糖,相对于以前的完整写法,这种简写形式可以让你少写一个function键字.
React.createClass({
render(){
return(
<View></View>
)
}
})
//等价于
React.createClass({
render:function(){
return(
<View></View>
)
}
})
以上是小编给大家分享的reactnativees6语法，希望大家喜欢。