关键词:
概述
本篇为《React Native之React速学教程》的最后一篇。本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑。
ES6的特性
何为ES6?
ES6全称ECMAScript 6.0,ES6于2015年6月17日发布,ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为ECMAScript-262。
下面我为大家列举了ES6新特性中对我们开发影响比较大的六方面的特性。
1.类(class)
对熟悉Java,object-c,c#等纯面向对象语言的开发者来说,都会对class有一种特殊的情怀。ES6 引入了class(类),让JavaScript的面向对象编程变得更加简单和易于理解。
class Animal {
// 构造方法,实例化的时候将会被调用,如果不指定,那么会有一个不带参数的默认构造函数.
constructor(name,color) {
this.name = name;
this.color = color;
}
// toString 是原型对象上的属性
toString() {
console.log(‘name:‘ + this.name + ‘,color:‘ + this.color);
}
}
var animal = new Animal(‘dog‘,‘white‘);//实例化Animal
animal.toString();
console.log(animal.hasOwnProperty(‘name‘)); //true
console.log(animal.hasOwnProperty(‘toString‘)); // false
console.log(animal.__proto__.hasOwnProperty(‘toString‘)); // true
class Cat extends Animal {
constructor(action) {
// 子类必须要在constructor中指定super 方法,否则在新建实例的时候会报错.
// 如果没有置顶consructor,默认带super方法的constructor将会被添加、
super(‘cat‘,‘white‘);
this.action = action;
}
toString() {
console.log(super.toString());
}
}
var cat = new Cat(‘catch‘)
cat.toString();
// 实例cat 是 Cat 和 Animal 的实例,和Es5完全一致。
console.log(cat instanceof Cat); // true
console.log(cat instanceof Animal); // true
2.模块(Module)
ES5不支持原生的模块化,在ES6中,模块将作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。
导出(export)
ES6允许在一个模块中使用export来导出多个变量或方法。
导出变量
//test.js
export var name = ‘Rainbow‘
心得:ES6不仅支持变量的导出,也支持常量的导出。
export const sqrt = Math.sqrt;//导出常量
ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。
//test.js
var name = ‘Rainbow‘;
var age = ‘24‘;
export {name, age};
导出函数
// myModule.js
export function myModule(someArg) {
return someArg;
}
导入(import)
定义好模块的输出以后就可以在另外一个模块通过import引用。
import {myModule} from ‘myModule‘;// main.js
import {name,age} from ‘test‘;// test.js
心得:一条import 语句可以同时导入默认方法和其它变量。
import defaultMethod, { otherMethod } from ‘xxx.js‘;
3.箭头(Arrow)函数
这是ES6中最令人激动的特性之一。=>
不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个this
,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;
或var that = this
这种引用外围this的模式。但借助=>
,就不需要这种模式了。
箭头函数的结构
箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。
// 箭头函数的例子
()=>1
v=>v+1
(a,b)=>a+b
()=>{
alert("foo");
}
e=>{
if (e == 0){
return 0;
}
return 1000/e;
}
心得:不论是箭头函数还是bind,每次被执行都返回的是一个新的函数引用,因此如果你还需要函数的引用去做一些别的事情(譬如卸载监听器),那么你必须自己保存这个引用。
卸载监听器时的陷阱
错误的做法
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener(‘change‘, this.onAppPaused.bind(this));
}
componentWillUnmount(){
AppStateIOS.removeEventListener(‘change‘, this.onAppPaused.bind(this));
}
onAppPaused(event){
}
}
正确的做法
class PauseMenu extends React.Component{
constructor(props){
super(props);
this._onAppPaused = this.onAppPaused.bind(this);
}
componentWillMount(){
AppStateIOS.addEventListener(‘change‘, this._onAppPaused);
}
componentWillUnmount(){
AppStateIOS.removeEventListener(‘change‘, this._onAppPaused);
}
onAppPaused(event){
}
}
除上述的做法外,我们还可以这样做:
class PauseMenu extends React.Component{
componentWillMount(){
AppStateIOS.addEventListener(‘change‘, this.onAppPaused);
}
componentWillUnmount(){
AppStateIOS.removeEventListener(‘change‘, this.onAppPaused);
}
onAppPaused = (event) => {
//把方法直接作为一个arrow function的属性来定义,初始化的时候就绑定好了this指针
}
}
需要注意的是:不论是bind还是箭头函数,每次被执行都返回的是一个新的函数引用,因此如果你还需要函数的引用去做一些别的事情(譬如卸载监听器),那么你必须自己保存这个引用。
4.ES6不再支持Mixins
在ES5下,我们经常使用mixin来为组件添加一些新的方法,如:
var SetIntervalMixin = {
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.forEach(clearInterval);
}
};
var TickTock = React.createClass({
mixins: [SetIntervalMixin], // Use the mixin
getInitialState: function() {
return {seconds: 0};
},
...
但,很不幸的是,ES6不支持使用Mixins了,不过我们可以使用,增强组件来替代Mixins。
//Enhance.js
import { Component } from "React";
export var Enhance = ComposedComponent => class extends Component {
constructor() {
this.state = { data: null };
}
componentDidMount() {
this.setState({ data: ‘Hello‘ });
}
render() {
return <ComposedComponent {...this.props} data={this.state.data} />;
}
};
//HigherOrderComponent.js
import { Enhance } from "./Enhance";
class MyComponent {
render() {
if (!this.data) return <div>Waiting...</div>;
return <div>{this.data}</div>;
}
}
export default Enhance(MyComponent); // Enhanced component
用一个“增强组件”,来为某个类增加一些方法,并且返回一个新类,这无疑能实现mixin所实现的大部分需求。
另外,网上也有很多其他的方案,如react-mixin。
5.ES6不再有自动绑定
在ES5中,React.createClass会把所有的方法都bind一遍,这样可以提交到任意的地方作为回调函数,而this不会变化。但在ES6中没有了自动绑定,也就是说,你需要通过bind或者箭头函数来手动绑定this引用。
// 通过使用 bind() 来绑定`this`
<div onClick={this.tick.bind(this)}>
// 也可通过使用箭头函数来实现
<div onClick={() => this.tick()}>
心得: 因为无论是箭头函数还是bind()每次被执行都返回的是一个新的函数引用,所以,推荐大家在组件的构造函数中来绑定
this
。
```javascript constructor(props) { super(props); this.state = {count: props.initialCount}; this.tick = this.tick.bind(this);//在构造函数中绑定
this
} // 使用
<div onClick={this.tick}>
### 6.static关键字
在ES6中我们可以通过static关键字来定义一个类函数。
```javascript
class People {
constructor(name) { //构造函数
this.name = name;
}
sayName() {
console.log(this.name);
}
static formatName(name) //将formatName定义为类方法
return name[0].toUpperCase() + name.sustr(1).toLowerCase();
}
}
console.log(People.formatName("tom")); //使用类方法formatName
ES6 VS ES5(ES6与ES5的区别)
新版本的React /React Native使用了ES6标准,下面就让我们一起了解一下基于ES6的React/React Native相比ES5有哪些不同。
心得:很多React/React Native的初学者经常会被ES6问题迷惑:官方建议我们ES6,但是网上搜到的很多教程和例子都是基于ES5版本的,所以很多人感觉无法下手,下面就让我们一起认识ES6与ES5在React/React Native开发上有哪些不同和需要注意的地方。
下面是我们需要知道的ES6与ES5在4大方面上的区别。
1.在定义方面的不同
在定义组件,方法,属性等方面,ES6与ES5是有所不同的,下面就让我们一起看一下有哪些不同。
心得:因为向下兼容的原因,你在开发过程中可使用ES6也可以使用ES5的规范,但为了代码的风格一致性,建议尽量减少混写。
定义组件
ES5
在ES5里,通常通过React.createClass来定义一个组件类,像这样:
var Photo = React.createClass({
render: function() {
return (
<Image source={this.props.source} />
);
},
});
ES6
在ES6里,我们通过继承React.Component 来定义一个组件类,像这样:
class Photo extends React.Component {
render() {
return (
<Image source={this.props.source} />
);
}
}
定义方法
相比ES5,ES6在方法定义上语法更加简洁,从上面的例子里可以看到,给组件定义方法不再用 名字: function()的写法,而是直接用名字(),在方法的最后也不能有逗号了。
ES5
var Photo = React.createClass({
test: function(){
},
render: function() {
return (
<Image source={this.props.source} />
);
},
});
ES6
class Photo extends React.Component {
test() {
}
render() {
return (
<Image source={this.props.source} />
);
}
}
定义组件的属性类型和默认属性
ES5
在ES5里,属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现。
var Video = React.createClass({
getDefaultProps: function() {
return {
autoPlay: false,
maxLoops: 10,
};
},
propTypes: {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
},
render: function() {
return (
<View />
);
},
});
ES6
在ES6里,可以统一使用static成员来实现。
class Video extends React.Component {
static defaultProps = {
autoPlay: false,
maxLoops: 10,
}; // 注意这里有分号
static propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
}; // 注意这里有分号
render() {
return (
<View />
);
} // 注意这里既没有分号也没有逗号
}
也有人这么写,虽然不推荐,但读到代码的时候你应当能明白它的意思:
class Video extends React.Component {
render() {
return (
<View />
);
}
}
Video.defaultProps = {
autoPlay: false,
maxLoops: 10,
};
Video.propTypes = {
autoPlay: React.PropTypes.bool.isRequired,
maxLoops: React.PropTypes.number.isRequired,
posterFrameSrc: React.PropTypes.string.isRequired,
videoSrc: React.PropTypes.string.isRequired,
};
心得:对React开发者而言,static在一些老版本的浏览器上是不支持的。React Native开发者可以不用担心这个问题。
2.在导入(import)与导出(export)组件上的不同
导入组件
ES5
在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样:
var React = require("react");
var {
Component,
PropTypes
} = React; //引用React抽象组件
var ReactNative = require("react-native");
var {
Image,
Text,
} = ReactNative; //引用具体的React Native组件
var AboutPage=require(‘./app/AboutPage‘) //引入app目录下AboutPage组件,即AboutPag.js
var PopularPage=require(‘./app/PopularPage‘) //引入app目录下PopularPage组件,即PopularPage.js
var FavoritePage=require(‘./app/FavoritePage‘) //引入app目录下FavoritePage组件,即FavoritePage.js
ES6
在ES6里,没有了require,而是使用import来导入组件,有点像Java的写法。
import React, {
Component,
PropTypes,
} from ‘react‘;//引用React抽象组件
import {
Image,
Text
} from ‘react-native‘ //引用具体的React Native组件
import AboutPage from ‘./app/AboutPage‘ //引入app目录下AboutPage组件,即AboutPag.js
import PopularPage from ‘./app/PopularPage‘ //引入app目录下PopularPage组件,即PopularPage.js
import FavoritePage from ‘./app/FavoritePage‘ //引入app目录下FavoritePage组件,即FavoritePage.js
另外,ES6支持将组件导入作为一个对象,使用“ * as”修饰即可。
//引入app目录下AboutPage组件作为一个对象,接下来就可使用“AboutPage.”来调用AboutPage的方法及属性了。
import * as AboutPage from ‘./app/AboutPage‘
心得:使用“ * as ”修饰后,导入的组件直接被实例化成一个对象,可以使用“.”语法来调用组件的方法和属性,和没有“ * as ”修饰是有本质区别的,使用的时候要特别注意。
导出组件
ES5
在ES5里,要导出一个类给别的模块用,一般通过module.exports来导出:
var MyComponent = React.createClass({
...
});
module.exports = MyComponent;
ES6
在ES6里,通常用export default来实现相同的功能:
export default class MyComponent extends Component{
...
}
3.在初始化state上的不同
ES5
var Video = React.createClass({
getInitialState: function() {
return {
loopsRemaining: this.props.maxLoops,
};
},
})
ES6
ES6下,有两种写法:
class Video extends React.Component {
state = {
loopsRemaining: this.props.maxLoops,
}
}
不过我们推荐更易理解的在构造函数中初始化(这样你还可以根据需要做一些计算):
class Video extends React.Component {
constructor(props){
super(props);
this.state = {
loopsRemaining: this.props.maxLoops,
};
}
}
4.在方法作为回调上的不同
在开发工作中,经常会使用到回调,如按钮的单击回调等,这也是在很多编程语言中都会经常出现的情况。ES6与ES5在使用回调方面是有区别的。
ES5
var PostInfo = React.createClass({
handleOptionsButtonClick: function(e) {
// Here, ‘this‘ refers to the component instance.
this.setState({showOptionsModal: true});
},
render: function(){
return (
<TouchableHighlight onPress={this.handleOptionsButtonClick}>
<Text>{this.props.label}</Text>
</TouchableHighlight>
)
},
});
在ES5中,React.createClass会把所有的方法都bind一遍,这样可以提交到任意的地方作为回调函数,而this不会变化。但官方现在逐步认为这反而是不标准、不易理解的。
在ES6下,你需要通过bind来绑定this引用,或者使用箭头函数(它会绑定当前scope的this引用):
ES6
class PostInfo extends React.Component{
handleOptionsButtonClick(e){
this.setState({showOptionsModal: true});
}
render(){
return (
<TouchableHighlight
onPress={this.handleOptionsButtonClick.bind(this)}
//onPress={e=>this.handleOptionsButtonClick(e)}//这种方式和上面的效果是一样的
>
<Text>{this.props.label}</Text>
</TouchableHighlight>
)
},·
}
参考
React’s official site
React on ES6+
reactnative之react速学教程(中)
概述本篇为《ReactNative之React速学教程》的第一篇。本篇将从React的特点、如何使用React、JSX语法、组件(Component)以及组件的属性,状态等方面进行讲解。What’sReactReact是一个用于组建用户界面的JavaScript库,让你以更简单的方式... 查看详情
reactnative之react速学教程(上)
概述本篇为《ReactNative之React速学教程》的第一篇。本篇将从React的特点、如何使用React、JSX语法、组件(Component)以及组件的属性,状态等方面进行讲解。What’sReactReact是一个用于组建用户界面的JavaScript库,让你以更简单的方式... 查看详情
2手把手教reactnative实战之从react到rn
###React简介RN是基于React设计,了解React有助于我们开发RN应用;React希望将功能分解化,让开发变得像搭积木一样,快速而且可维护React主要有如下3个特点:*作为UI(JusttheUI)*虚拟DOM(VirtualDOM)这是亮点 是React最重要的... 查看详情
reactnative系列教程之十一插件的安装使用与更新(示例:react-native-tab-navigator)
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】原文链接: http://www.himigame.com/react-native/2294.htmlwidth="150"height="210"frameborder="0"scrolling="no 查看详情
reactnative之底层源码分析篇
学习React-Native有一段时间了。今天就从源码的角度来分析下React-Native底层的通信机制。了解下底层是如何通信的对开发也有所好处。概要先大概讲一下React-Native的通信过程。RN主要的通信在于java与js之间,平常我们写的jsx代... 查看详情
东方耀手把手教reactnative实战开发视频教程+源码笔记全集
课程序号标题第0课0、手把手教ReactNative实战之开山篇_视频第1课1、手把手教ReactNative实战之环境搭建_视频_Windows环境第1课1、手把手教ReactNative实战之环境搭建【Mac真机】同时调试开发Android&IOS第2课2、手把手教ReactNative实战之... 查看详情
稀饭reactnative实战系列教程之影片数据获取并解析
...据。数据来源于网络,仅用于学习使用。fetch介绍fetch是reactnative的一个网络请求库,使用该库不用引入模块,可以直接使用。一个简单的请求如下:fetch(‘http://facebook.github.io/react-native/movies.json‘)发起请求之后,我们还需要对它... 查看详情
reactnative组件之textinput
ReactNative组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性。/***SampleReactNativeApp*https://github.com/facebook/react-native*周少停2016-09-16*TextInput常用属性*/importReact,{Com 查看详情
reactnative系列教程之十二reactnative(js/es)与ios(object-c)交互通信
本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自【黑米GameDev街区】原文链接: http://www.himigame.com/react-native/2301.htmlwidth="150"height="210"frameborder="0"scrolling="no 查看详情
reactnative之flex
组件的高度,宽度决定了在屏幕上的尺寸。React-Native中尺寸都是无单位的,表示的是与设备像素密度无关的逻辑像素点。importReact,{Component}from‘react‘;import{AppRegistry,View}from‘react-native‘;classTestSizeextendsComponent{render(){return(<View&... 查看详情
reactnative教程-调用webapi
...程,我们可以使用fetch,这也是一个更好的网络API,它在reactnative中默认可以使用。在react- 查看详情
reactnative组件之scrollview
ReactNative组件ScrollView类似于iOS中的UIScrollView.其使用方法和属性如下:/***SampleReactNativeApp*https://github.com/facebook/react-native*周少停ScrollView的常用属性*2016-09-19*/importReact,{Component}from‘react‘;import{AppReg 查看详情
reactnative教程
ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App(app开发公司ty300.com)。而且ReactNative已经用于生产环境——FacebookGroupsiOS应用就是基于它开发的。 ReactNative的原理是在JavaScript中用React抽象操作... 查看详情
reactnative导航器之react-navigation使用
在上一节Navigation组件,我们使用系统提供的导航组件做了一个跳转的例子,不过其实战能力不强,这里推荐一个超牛逼的第三方库:react-navigation。在讲react-navigation之前,我们先看一下常用的导航组件。导航控件常见的导航主要... 查看详情
reactnative快速入门之认识props和state
眼下ReactNative(以后简称RN)越来越火,我也要投入到学习当中。对于一个前端来说,还是有些难度。因为本人觉得这是一个App开发的领域,自然是不同。编写本文的时候,RN的版本为0.21.0。我们马上以代码进入今天的学习。‘use... 查看详情
reactnative开发之(04)例子讲解
index.ios.jsimportReact,{Component}from‘react‘;import{AppRegistry,StyleSheet,Text,View}from‘react-native‘;classTestextendsComponent{render(){return(<Viewstyle={styles.container}><Textst 查看详情
reactnative组件系列之imagebackground
这个组件是在0.46.4新加入的一个组件,加入该组件的原因https://github.com/facebook/react-native/commit/9637dd4a1b78d5f6da510b1b4ad10d45d67badbf注意:该组件还未真正上完全实现下面的目的Summary:Weareremovingsupportofnestingviewsinside<Image>co 查看详情
reactnative之极光推送jpush-react-native手把手配置
这是reactnative配置极光推送使用的组件,比较常用https://github.com/jpush/jpush-react-native先把组件地址贴出来,方便大家使用参考。如果这个大家不能配置成功,欢迎大家一起入坑交流,有问题联系QQ379038610(添加备注说明原因)... 查看详情