深入浅析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 文件的同步加载与异步加载实现原理
Dec 13 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
详解JavaScript操作HTML DOM的基本方式
Oct 21 Javascript
解析Vue2.0双向绑定实现原理
Feb 23 Javascript
JS使用正则表达式找出最长连续子串长度
Oct 26 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
微信小程序使用字体图标的方法
May 23 Javascript
JavaScript实现滑块验证解锁
Jan 07 Javascript
HTML+JS实现在线朗读器
Feb 15 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.MVC的模板标签系统(三)
2006/09/05 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
PHP6连接SQLServer2005的三部曲
2016/04/15 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
Apache+PHP+MySQL搭建PHP开发环境图文教程
2020/08/06 PHP
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
js 走马灯简单实例
2013/11/21 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
node.js中的http.response.addTrailers方法使用说明
2014/12/14 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
nodeJS微信分享
2017/12/20 NodeJs
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
python SVD压缩图像的实现代码
2019/11/05 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
python读取与处理netcdf数据方式
2020/02/14 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
材料专业大学毕业生自荐书
2014/07/02 职场文书
毕业酒会致辞
2015/07/29 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python