深入浅析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 相关文章推荐
javascript与webservice的通信实现代码
Dec 25 Javascript
js实现可拖动DIV的方法
Dec 17 Javascript
js表单登陆验证示例
Oct 19 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
vue列表单项展开收缩功能之this.$refs的详解
May 05 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
vue实现简单学生信息管理
May 30 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
vue 子组件watch监听不到prop的解决
Aug 09 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+jQuery 注册模块开发详解
2014/10/14 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
js对象与打印对象分析比较
2013/04/23 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
javascript实现密码验证
2015/11/10 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
对pandas中to_dict的用法详解
2018/06/05 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
Django--权限Permissions的例子
2019/08/28 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
python实现高斯判别分析算法的例子
2019/12/09 Python
Python中itertools的用法详解
2020/02/07 Python
Python数据正态性检验实现过程
2020/04/18 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
东方通信股份有限公司VC面试题
2014/08/27 面试题
如何开发安全的AJAX应用
2014/03/26 面试题
主持人演讲稿范文
2013/12/28 职场文书
办公室岗位职责
2014/02/12 职场文书
《秋游》教学反思
2014/04/24 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android