React Native之React速学教程(下)

概述

本篇为《React
Native之React速学教程》的末尾一篇。本篇将带着大家一同认识ES6,学习在付出中常用的有的ES6的新天性,以及ES6与ES5的界别,消除大家在就学React
/React Native进度中对此ES6与ES5的片段迷惑。

ES6的特性

何为ES6?

ES6全称ECMAScript
6.0,ES6于2015年五月124日揭露,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允许在2个模块中使用export来导出三个变量或形式。

导出变量

//test.js
export var name = 'Rainbow'

感受:ES6不仅支持变量的导出,也帮衬常量的导出。 class=”Apple-converted-space”> export const sqrt = Math.sqrt;//导出常量

ES6将2个文书视为二个模块,上边的模块通过 export
向外输出了2个变量。多个模块也能够而且往外面输出多个变量。

 //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的情势。但依靠=>,就不需求那种情势了。

箭头函数的协会

箭头函数的箭头=>在此以前是2个空括号、单个的参数名、或用括号括起的三个参数名,而箭头之后能够是一个表达式(作为函数的重临值),或许是用花括号括起的函数体(须要活动通过return来再次回到值,不然重返的是undefined)。

// 箭头函数的例子
()=>1
v=>v+1
(a,b)=>a+b
()=>{
    alert("foo");
}
e=>{
    if (e == 0){
        return 0;
    }
    return 1000/e;
}

感受:不论是箭头函数依旧bind,每一次被执行都回来的是1个新的函数引用,由此一旦您还索要函数的引用去做一些别的事情(譬如卸载监听器),那么您不能够不协调保留那些引用。

卸载监听器时的陷阱

荒唐的做法

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所完成的绝超越1/2须要。

其余,网上也有好多别的的方案,如react-mixin

5.ES6不再有全自动绑定

在ES第55中学,React.createClass会把具备的点子都bind2遍,那样能够提交到自由的地点作为回调函数,而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 class=”Apple-converted-space”> } // 使用

<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开发上有哪些区别和急需专注的地点。

ECMAScript,上面是我们要求领会的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
”修饰后,导入的零部件直接被实例化成2个目的,能够选用“.”语法来调用组件的法门和天性,和尚未“
* 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+