深入浅析react native es6语法


Posted in Javascript onDecember 09, 2015

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属性混合使用,需要同名属性,后者将覆盖前者:
JavaScript
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来编写代码,许多新语法能提高我们的工作效率

解构赋值

var {
	 StyleSheet,
	 Text,
	 View
	} = React;

这句代码是ES6 中新增的解构(Destructuring)赋值语句。准许你获取对象的多个属性并且使用一条语句将它们赋给多个变量。

上面的代码等价于:

var StyleSheet = React.StyleSheet;
	var Text = React.Text;
	var View = React.View

再看几个例子,以前,为变量赋值,只能直接指定值:

var a = ;
 var b = ;
 var c = ;

而ES 允许这样写:

var [a, b, c] = [, , ];

更详细的内容可参看:变量的解构赋值

箭头函数

React Native 里面经常会出现类似的代码:
ES6中新增的箭头操作符=> 简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs

举几个栗子感受下:

var array = [, , ];
//传统写法
	array.forEach(function(v, i, a) {
	  console.log(v);
	});
//ES
	array.forEach(v => console.log(v));
	var sum = (num, num) => { return num + num; }
//等同于:
	var sum = function(num, num) {
	  return num + num;
	 };

更多详细内容请自行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(people,people,people){
   console.log(Hello ${people},${people},${people});
 }
//但是我们将一个数组以拓展参数的形式传递,它能很好地映射到每个单独的参数
 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>
     )
   }
 })

以上是小编给大家分享的react native es6语法,希望大家喜欢。

Javascript 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
JavaScript程序设计之JS调试
Dec 09 #Javascript
js实现的星星评分功能函数
Dec 09 #Javascript
JavaScript中的this到底是什么(一)
Dec 09 #Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 #Javascript
完美实现bootstrap分页查询
Dec 09 #Javascript
JavaScript脚本库编写的方法
Dec 09 #Javascript
js省市联动效果完整实例代码
Dec 09 #Javascript
You might like
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
jQuery解决$符号命名冲突
2016/06/18 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
2019/02/10 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
vscode+gulp轻松开发小程序的完整步骤
2020/10/18 Javascript
python实现通过代理服务器访问远程url的方法
2015/04/29 Python
Python中datetime模块参考手册
2017/01/13 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
opencv导入头文件时报错#include的解决方法
2019/07/31 Python
Python实现微信中找回好友、群聊用户撤回的消息功能示例
2019/08/23 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Python笔记之观察者模式
2019/11/20 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
Python执行时间的几种计算方法
2020/07/31 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
小学岗位竞聘方案
2014/01/22 职场文书
经济管理专业求职信
2014/06/09 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
建筑施工安全责任书
2014/07/24 职场文书
转让协议书范本
2014/09/13 职场文书
校本培训个人总结
2015/02/28 职场文书
党员个人自我评价
2015/03/03 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang