深入浅析react native es6语法

更新时间：2015年12月09日 11:23:25 投稿：mrr

这篇文章主要介绍了深入浅析react native 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 = 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'

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'

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语法，希望大家喜欢。

您可能感兴趣的文章:

React前端开发createElement源码解读
这篇文章主要为大家介绍了React前端开发createElement源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
详解使用webpack+electron+reactJs开发windows桌面应用
这篇文章主要介绍了详解使用webpack+electron+reactJs开发windows桌面应用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
React如何使用localStorage及实现删除笔记操作过程
这篇文章主要介绍了React如何使用localStorage及实现删除笔记操作过程,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
2024-12-12
React事件节流效果失效的原因及解决
这篇文章主要介绍了React事件节流效果失效的原因及解决，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下
2021-04-04
使用react完成点击返回顶部操作
本文主要介绍了使用react完成点击返回顶部操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
ReactNative页面跳转Navigator实现的示例代码
本篇文章主要介绍了ReactNative页面跳转Navigator实现的示例代码，具有一定的参考价值，有兴趣的可以了解一下
2017-08-08
React星星评分组件的实现
评分插件在购物的应用中经常可以看得到，但是用着别人的总是没有自己写的顺手，本文就使用React实现星星评分组件，感兴趣的可以了解一下
2021-06-06
使用React MUI库实现用户列表分页功能
MUI是一款基于React的UI组件库，可以方便地构建美观的用户界面，使用MUI的DataTable组件和分页器组件可以轻松实现用户列表分页功能，这篇文章使用MUI库实现了用户列表分页功能，感兴趣的同学可以参考下文
2023-05-05
React antd中setFieldsValu的简便使用示例代码
form.setFieldsValue是antd Form组件中的一个方法,用于动态设置表单字段的值,它接受一个对象作为参数,对象的键是表单字段的名称,值是要设置的字段值,这篇文章主要介绍了React antd中setFieldsValu的简便使用,需要的朋友可以参考下
2023-08-08
React+Antd+Redux实现待办事件的方法
这篇文章主要介绍了React+Antd+Redux实现待办事件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03

深入浅析react native es6语法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具