深入浅析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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
js动态切换图片的方法
Jan 20 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
May 10 Javascript
jquery拖动改变div大小
Jul 04 jQuery
Vue组件库发布到npm详解
Feb 17 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
vuex的module模块用法示例
Nov 12 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
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文件缓存内容保存格式实例分析
2014/08/20 PHP
php输出控制函数和输出函数生成静态页面
2019/06/27 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
Span元素的width属性无效果原因及解决方案
2010/01/15 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
微信小程序实现留言板
2018/10/31 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
使用python对文件中的数值进行累加的实例
2018/11/28 Python
深入浅析Python中的迭代器
2019/06/04 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
安踏官方商城:anta.cn
2019/12/16 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
大学生求职推荐信
2013/11/27 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
模范班主任事迹材料
2014/12/17 职场文书
结婚司仪主持词
2015/06/29 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python