深入浅析react native es6语法
react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率
rush:js;">
var {
StyleSheet,Text,View
} = React;
这句代码是ES6 中新增的解构(Destructuring)赋值语句。准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量。
上面的代码等价于:
rush:js;">
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View
再看几个例子,以前,为变量赋值,只能直接指定值:
rush:js;">
var a = 1;
var b = 2;
var c = 3;
而ES6 允许这样写:
rush:js;">
var [a,b,c] = [1,2,3];
更详细的内容可参看:变量的解构赋值
箭头函数
React Native 里面经常会出现类似的代码:
ES6中新增的箭头操作符=> 简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs
举几个栗子感受下:
console.log(v));
var sum = (num1,num2) => { return num1 + num2; }
//等同于:
var sum = function(num1,num2) {
return num1 + num2;
};
更多详细内容请自行Google,或查看:
延展操作符(Spread operator)
这个 … 操作符(也被叫做延展操作符 - spread operator)已经被 ES6 数组 支持。它允许传递数组或者类数组直接做为函数的参数而不用通过apply。
而在React中,延展操作符一般用于属性的批量赋值上。在JSX中,可以使用…运算符,表示将一个对象的键值对与ReactElement的props属性合并。
;
//等价于
var props = {};
props.foo = x;
props.bar = y;
var component =
;
它也可以和普通的XML属性混合使用,需要同名属性,后者将覆盖前者:
JavaScript
var props = { foo: 'default' };
var component =
;
console.log(component.props.foo); // 'override'
更多详细信息:
class
ES6中添加了对类的支持,引入了class关键字(其实class在JavaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。
rush:js;">
class PropertyView extends Component {
render() {
return (
)
}
}
//等价于
var PropertyView = React.createClass({
render() {
return (
)
}
})
方法定义(method deFinition)
ECMAScript 6中,引入了一种名叫方法定义(method deFinition)的新语法糖,相对于以前的完整写法,这种简写形式可以让你少写一个function键字.
rush:js;">
React.createClass({
render() {
return (
)
}
})
//等价于
React.createClass({
render : function() {
return (
)
}
})
最后,推荐一个ES6的PPT,写得不错:
react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率
解构赋值
这句代码是ES6 中新增的解构(Destructuring)赋值语句。准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量。
上面的代码等价于:
再看几个例子,以前,为变量赋值,只能直接指定值:
而ES 允许这样写:
更详细的内容可参看:变量的解构赋值
箭头函数
React Native 里面经常会出现类似的代码:
ES6中新增的箭头操作符=> 简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs
举几个栗子感受下:
console.log(v));
var sum = (num,num) => { return num + num; }
//等同于:
var sum = function(num,num) {
return num + num;
};
更多详细内容请自行Google,或查看:
延展操作符(Spread operator)
这个 … 操作符(也被叫做延展操作符 - spread operator)已经被 ES6 数组 支持。它允许传递数组或者类数组直接做为函数的参数而不用通过apply。
rush:js;">
var people=['Wayou','Sherlock'];
//sayHello
函数本来接收三个单独的参数人妖,人二和人三
function sayHello(people,people,people){
console.log(Hello ${people},${people},${people});
}
//但是我们将
一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
sayHello(...people);
//
输出:Hello Wayou,Sherlock
//而在以前,如果需要传递数组当参数,我们需要使用
函数的apply
方法
sayHello.apply(null,people);
//
输出:Hello Wayou,Sherlock
而在React中,延展操作符一般用于
属性的批量赋值上。在JSX中,可以使用…运算符,表示将
一个对象的键值对与ReactElement的props
属性合并。
var props = {};
props.foo = x;
props.bar = y;
var component =
;
//等价于
var props = {};
props.foo = x;
props.bar = y;
var component =
;
它也可以和普通的XML属性混合使用,需要同名属性,后者将覆盖前者:
rush:js;">
var props = { foo: 'default' };
var component = ;
console.log(component.props.foo);
// 'override'
更多详细信息:
class
ES6中添加了对类的支持,引入了class关键字(其实class在JavaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。
rush:js;">
class PropertyView extends Component {
render() {
return (
)
}
}
//等价于
var PropertyView = React.createClass({
render() {
return (
)
}
})
方法定义(method deFinition)
ECMAScript 6中,这种简写形式可以让你少写一个function键字.
rush:js;">
React.createClass({
render() {
return (
)
}
})
//等价于
React.createClass({
render : function() {
return (
)
}
})
以上是小编给大家分享的react native es6语法,希望大家喜欢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。