深入浅析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 相关文章推荐
Maps Javascript
Jan 22 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
Nov 12 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
jQuery弹性滑动导航菜单实现思路及代码
May 02 Javascript
JS倒计时代码汇总
Nov 25 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
Jan 13 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
小程序如何使用分包加载的实现方法
May 22 Javascript
详解实现vue的数据响应式原理
Jan 20 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多线程之内部多线程实例分析
2015/03/09 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
PHP调用全国天气预报数据接口查询天气示例
2019/02/20 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
JavaScript 学习 - 提高篇
2007/02/02 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
js的正则test,match,exec详细解析
2014/01/29 Javascript
javascript操作表格排序实例分析
2015/05/06 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
面试常见的js算法题
2017/03/23 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
js中自定义react数据验证组件实例详解
2018/10/19 Javascript
详解vue 兼容IE报错解决方案
2018/12/29 Javascript
js module大战
2019/04/19 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
浅谈Python基础—判断和循环
2019/03/22 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
Python多线程的退出控制实现
2020/08/10 Python
html5 Canvas画图教程(1)—画图的基本常识
2013/01/09 HTML / CSS
美国户外烹饪产品购物网站:Outdoor Cooking
2020/01/10 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
教师对照四风自我剖析材料
2014/09/30 职场文书
教师学习三严三实心得体会
2014/10/13 职场文书
关于清明节的演讲稿2015
2015/03/18 职场文书
老人节主持词
2015/07/04 职场文书
会计入职心得体会
2016/01/22 职场文书
详解Python常用的魔法方法
2021/06/03 Python
MySQL快速插入一亿测试数据
2021/06/23 MySQL