react native 中es6语法解析
react native是直接使用es6来编写代码,许多新语法能提高我们的工作效率
解构赋值
var {
StyleSheet,
Text,
View
} = React;
这句代码是ES6 中新增的解构(Destructuring)赋值语句。准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量。
上面的代码等价于:
var StyleSheet = React.StyleSheet;
var Text = React.Text;
var View = React.View
再看几个例子,以前,为变量赋值,只能直接指定值:
var a = 1;
var b = 2;
var c = 3;
而ES6 允许这样写:
var [a, b, c] = [1, 2, 3];
更详细的内容可参看:变量的解构赋值
箭头函数
React Native 里面经常会出现类似的代码:
ES6中新增的箭头操作符=>
简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs
举几个栗子感受下:
var array = [1, 2, 3];
//传统写法
array.forEach(function(v, i, a) {
console.log(v);
});
//ES6
array.forEach(v => console.log(v));
var sum = (num1, num2) => { return num1 + num2; }
//等同于:
var sum = function(num1, num2) {
return num1 + num2;
};
更多详细内容请自行Google,或查看:https://www.imququ.com/post/arrow-function-in-es6.html
延展操作符(Spread operator)
这个 … 操作符(也被叫做延展操作符 - spread operator)已经被 ES6 数组 支持。它允许传递数组或者类数组直接做为函数的参数而不用通过apply。
var people=['Wayou','John','Sherlock'];
//sayHello函数本来接收三个单独的参数人妖,人二和人三
function sayHello(people1,people2,people3){
console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
sayHello(...people);//输出:Hello Wayou,John,Sherlock //而在以前,如果需要传递数组当参数,我们需要使用函数的apply方法
sayHello.apply(null,people);//输出:Hello Wayou,John,Sherlock
而在React
中,延展操作符一般用于属性的批量赋值上。在JSX中,可以使用…运算符,表示将一个对象的键值对与ReactElement的props属性合并。
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />; //等价于
var props = {};
props.foo = x;
props.bar = y;
var component = <Component foo={x} bar={y} />;
它也可以和普通的XML属性混合使用,需要同名属性,后者将覆盖前者:
var props = { foo: 'default' };
var component = <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支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。
class PropertyView extends Component {
render() {
return (
<View></View>
)
}
} //等价于
var PropertyView = React.createClass({
render() {
return (
<View></View>
)
}
})
方法定义(method definition)
ECMAScript 6中,引入了一种名叫方法定义(method definition)的新语法糖,相对于以前的完整写法,这种简写形式可以让你少写一个function键字.
React.createClass({
render() {
return (
<View></View>
)
}
}) //等价于 React.createClass({
render : function() {
return (
<View></View>
)
}
})
最后,推荐一个ES6的PPT,写得不错:http://khan4019.github.io/ES6/
react native 中es6语法解析的更多相关文章
- 在 React Native 中使用 Redux 架构
前言 Redux 架构是 Flux 架构的一个变形,相对于 Flux,Redux 的复杂性相对较低,而且最为巧妙的是 React 应用可以看成由一个根组件连接着许多大大小小的组件的应用,Redux 也 ...
- [转] 在React Native中使用ART
http://bbs.reactnative.cn/topic/306/%E5%9C%A8react-native%E4%B8%AD%E4%BD%BF%E7%94%A8art 前半个月捣腾了一下Rea ...
- 在React Native中,使用fetch网络请求 实现get 和 post
//在React Native中,使用fetch实现网络请求 /* fetch 是一个封装程度更高的网络API, 使用了Promise * Promise 是异步编程的一种解决方案 * Promise ...
- react native中如何往服务器上传网络图片
let common_url = 'http://192.168.1.1:8080/'; //服务器地址 let token = ''; //用户登陆后返回的token /** * 使用fetch实现 ...
- react native中props的使用
react native中props的使用 一.props的使用 1:父组件传递的方式 在子组件中可以用this.props访问到父组件传递的值 <View> <Text> { ...
- React Native中组件的props和state
一.组件的属性(props)和状态(state) 1.属性(props) 它是组件的不可变属性(组件自己不可以自己修改props). 组件自身定义了一组props作为对外提供的接口,展示一个组件时只需 ...
- react native 中的redux 理解
redux 中主要分为三大块,分别是Action Reducer 与Store. 1.Action是js的一个普通对象,是store数据的唯一来源.通过store.dispath()讲action传到 ...
- 在 React Native 中使用 moment.js 無法載入語系檔案
moment.js 是很常見的日期時間 library,友善的 API 與極佳的執行效率是它的兩大賣點.例如 (new Date()).getFullYear(),如果使用 moment.js 我可以 ...
- React Native 中 CSS 的使用
首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...
随机推荐
- 针对开发项目的NABCD的分析
N(Need需求) 我们的创意是用户登录我们的软件,就可以实现自己修改图片,添加文字.解决了目前用户不知道如何P图,如何添加文字的难题. A(Approach做法) 我们的团队将用VS软件开发一个修改 ...
- SMP、NUMA、MPP体系结构介绍
从系统架构来看,目前的商用服务器大体可以分为三类,即对称多处理器结构 (SMP : Symmetric Multi-Processor) ,非一致存储访问结构 (NUMA : Non-Uniform ...
- Java 工程名上有个红色叹号
biuldpath把带×号的jar包remove保存,重新添加jar包
- 关于{get;set;}访问器
/// <summary> /// 此视频更新时间/创建时间 [生成时间,不手填] /// </summary> public System.String CreateTime ...
- (转)使用Flexible实现手淘H5页面的终端适配
原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...
- Python下的opencv小问题大智慧
1.今晚日了狗了,图像显示不按照预期出现,然后突然就好了...... 2.根据第一个问题举一个例子,另一个我没保存... 是不是分不清楚???? plt.imshow(wjy2, cmap='gr ...
- hadoop 问题及解决方式
转自http://www.bkjia.com/ASPjc/931209.html 解决Exception: org.apache.hadoop.io.nativeio.NativeIO$Windows ...
- TIDB-cenos7开发环境搭建
1.安装centos7,注意要安装桌面,如果最小化安装,无法使用IDE了 关闭防火墙或者打开4000端口 systemctl stop firewalld.service #停止firewall sy ...
- FastDFS 配置 Nginx 模块,并实现分布式同步-Linux
1.搭建虚拟机 a.复制虚拟机文件 首先复制我们之前安装好的fastdfs虚拟机,因为我们现在要设置它的IP为21,改名为CentOS-fastdfs - 21. b.设置网络 生成新的MAC地址 设 ...
- nohup top & 问题: top: failed tty get
执行 nohup top & nohup.out 显示 top: failed tty get +++++++++++++++++ top后台执行显示:top: failed tty get ...