React-Native 語法ES6-ES5對比

參考文檔
很多React/React Native的初學(xué)者都被ES6的問題迷惑:各路大神都建議我們直接學(xué)習(xí)ES6的語法(class Foo extends React.Component),然而網(wǎng)上搜到的很多教程和例子都是ES5版本的泉瞻,所以很多人在學(xué)習(xí)的時候連照貓畫虎都不知道怎么做宣蠕。今天在此整理了一些ES5和ES6的寫法對照表,希望大家以后讀到ES5的代碼,也能通過對照涝焙,在ES6下實現(xiàn)相同的功能。

模板

引用

在ES5里,如果使用CommonJS標(biāo)準(zhǔn)罗侯,引入React包基本通過require進(jìn)行,代碼類似這樣:

//ES5
var React = require("react");
var {
    Component,
    PropTypes
} = React;  //引用React抽象組件

var ReactNative = require("react-native");
var {
    Image,
    Text,
} = ReactNative;  //引用具體的React Native組件
在ES6里溪猿,import寫法更為標(biāo)準(zhǔn)
//ES6
import React, { 
    Component,
    PropTypes,
} from 'react';
import {
    Image,
    Text
} from 'react-native'

導(dǎo)出單個類

在ES5里钩杰,要導(dǎo)出一個類給別的模塊用,一般通過module.exports來導(dǎo)出

//ES5
var MyComponent = React.createClass({
    ...
});
module.exports = MyComponent;
在ES6里诊县,通常用export default來實現(xiàn)相同的功能:
//ES6
export default class MyComponent extends Component{
    ...
}
引用的時候也類似:
//ES5
var MyComponent = require('./MyComponent');
//ES6
import MyComponent from './MyComponent';
// 注意導(dǎo)入和導(dǎo)出的寫法必須配套讲弄,不能混用!

定義組件

在ES5里翎冲,通常通過React.createClass來定義一個組件類垂睬,像這樣:

//ES5
var Photo = React.createClass({
    render: function() {
        return (
            <Image source={this.props.source} />
        );
    },
});

在ES6里,我們通過定義一個繼承自React.Component的class來定義一個組件類抗悍,像這樣:

//ES6
class Photo extends React.Component {
    render() {
        return (
            <Image source={this.props.source} />
        );
    }
}

給組件定義方法

從上面的例子里可以看到驹饺,給組件定義方法不再用 名字: function()的寫法,而是直接用名字()缴渊,在方法的最后也不能有逗號了赏壹。

//ES5 
var Photo = React.createClass({
    componentWillMount: function(){

    },
    render: function() {
        return (
            <Image source={this.props.source} />
        );
    },
});

//ES6
class Photo extends React.Component {
    componentWillMount() {

    }
    render() {
        return (
            <Image source={this.props.source} />
        );
    }
}

定義組件的屬性類型和默認(rèn)屬性

在ES5里,屬性類型和默認(rèn)屬性分別通過propTypes成員和getDefaultProps方法來實現(xiàn)

//ES5 
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里衔沼,可以統(tǒng)一使用static成員來實現(xiàn)
//ES6
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 />
        );
    } // 注意這里既沒有分號也沒有逗號
}

也有人這么寫蝌借,雖然不推薦,但讀到代碼的時候你應(yīng)當(dāng)能明白它的意思:
//ES6
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開發(fā)者而言指蚁,static成員在IE10及之前版本不能被繼承菩佑,而在IE11和其它瀏覽器上可以,這有時候會帶來一些問題凝化。React Native開發(fā)者可以不用擔(dān)心這個問題稍坯。

初始化STATE

ES5下情況類似,

//ES5 
var Video = React.createClass({
    getInitialState: function() {
        return {
            loopsRemaining: this.props.maxLoops,
        };
    },
})
ES6下搓劫,有兩種寫法:
//ES6
class Video extends React.Component {
    state = {
        loopsRemaining: this.props.maxLoops,
    }
}
不過我們推薦更易理解的在構(gòu)造函數(shù)中初始化(這樣你還可以根據(jù)需要做一些計算):
//ES6
class Video extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            loopsRemaining: this.props.maxLoops,
        };
    }
}

把方法作為回調(diào)提供

很多習(xí)慣于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一遍,這樣可以提交到任意的地方作為回調(diào)函數(shù)枪向,而this不會變化勤揩。但官方現(xiàn)在逐步認(rèn)為這反而是不標(biāo)準(zhǔn)、不易理解的秘蛔。
在ES6下陨亡,你需要通過bind來綁定this引用傍衡,或者使用箭頭函數(shù)(它會綁定當(dāng)前scope的this引用)來調(diào)用

//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>
        )
    },
}

箭頭函數(shù)實際上是在這里定義了一個臨時的函數(shù),箭頭函數(shù)的箭頭=>之前是一個空括號数苫、單個的參數(shù)名聪舒、或用括號括起的多個參數(shù)名,而箭頭之后可以是一個表達(dá)式(作為函數(shù)的返回值)虐急,或者是用花括號括起的函數(shù)體(需要自行通過return來返回值箱残,否則返回的是undefined)。
// 箭頭函數(shù)的例子

()=>1
v=>v+1
(a,b)=>a+b
()=>{
    alert("foo");
}
e=>{
    if (e == 0){
        return 0;
    }
    return 1000/e;
}

需要注意的是止吁,不論是bind還是箭頭函數(shù)被辑,每次被執(zhí)行都返回的是一個新的函數(shù)引用,因此如果你還需要函數(shù)的引用去做一些別的事情(譬如卸載監(jiān)聽器)敬惦,那么你必須自己保存這個引用

// 錯誤的做法
class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused.bind(this));
    }
    componentDidUnmount(){
        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);
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this._onAppPaused);
    }
    onAppPaused(event){
    }
}
從這個帖子中我們還學(xué)習(xí)到一種新的做法:
// 正確的做法
class PauseMenu extends React.Component{
    componentWillMount(){
        AppStateIOS.addEventListener('change', this.onAppPaused);
    }
    componentDidUnmount(){
        AppStateIOS.removeEventListener('change', this.onAppPaused);
    }
    onAppPaused = (event) => {
        //把方法直接作為一個arrow function的屬性來定義盼理,初始化的時候就綁定好了this指針
    }
}

Mixins

在ES5下,我們經(jīng)常使用mixin來為我們的類添加一些新的方法俄删,譬如PureRenderMixin

var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
  mixins: [PureRenderMixin],

  render: function() {
    return <div className={this.props.className}>foo</div>;
  }
});

然而現(xiàn)在官方已經(jīng)不再打算在ES6里繼續(xù)推行Mixin宏怔,他們說:Mixins Are Dead. Long Live Composition袒餐。
盡管如果要繼續(xù)使用mixin纵诞,還是有一些第三方的方案可以用缴川,譬如這個方案
不過官方推薦买羞,對于庫編寫者而言,應(yīng)當(dāng)盡快放棄Mixin的編寫方式雇卷,上文中提到Sebastian Markb?ge的一段代碼推薦了一種新的編碼方式:

//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

用一個“增強函數(shù)”洪橘,來某個類增加一些方法颠区,并且返回一個新類帚戳,這無疑能實現(xiàn)mixin所實現(xiàn)的大部分需求玷或。

ES6+帶來的其它好處

解構(gòu)&屬性延展

結(jié)合使用ES6+的解構(gòu)和屬性延展,我們給孩子傳遞一批屬性更為方便了片任。這個例子把className以外的所有屬性傳遞給div標(biāo)簽:

class AutoloadingPostsGrid extends React.Component {
    render() {
        var {
            className,
            ...others,  // contains all properties of this.props except for className
        } = this.props;
        return (
            <div className={className}>
                <PostsGrid {...others} />
                <button onClick={this.handleLoadMoreClick}>Load more</button>
            </div>
        );
    }
}

下面這種寫法偏友,則是傳遞所有屬性的同時,用覆蓋新的className值:

<div {...this.props} className="override">
    …
</div>

這個例子則相反对供,如果屬性中沒有包含className位他,則提供默認(rèn)的值,而如果屬性中已經(jīng)包含了犁钟,則使用屬性中的值

<div className="base" {...this.props}>
    …
<
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末棱诱,一起剝皮案震驚了整個濱河市泼橘,隨后出現(xiàn)的幾起案子涝动,更是在濱河造成了極大的恐慌,老刑警劉巖炬灭,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件醋粟,死亡現(xiàn)場離奇詭異靡菇,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)米愿,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門厦凤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人育苟,你說我怎么就攤上這事较鼓。” “怎么了违柏?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵博烂,是天一觀的道長。 經(jīng)常有香客問我漱竖,道長禽篱,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任馍惹,我火速辦了婚禮躺率,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘万矾。我一直安慰自己悼吱,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布勤众。 她就那樣靜靜地躺著舆绎,像睡著了一般。 火紅的嫁衣襯著肌膚如雪们颜。 梳的紋絲不亂的頭發(fā)上吕朵,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機(jī)與錄音窥突,去河邊找鬼努溃。 笑死,一個胖子當(dāng)著我的面吹牛阻问,可吹牛的內(nèi)容都是我干的梧税。 我是一名探鬼主播,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼称近,長吁一口氣:“原來是場噩夢啊……” “哼第队!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起刨秆,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤凳谦,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后衡未,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體尸执,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡家凯,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了如失。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片绊诲。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖褪贵,靈堂內(nèi)的尸體忽然破棺而出掂之,到底是詐尸還是另有隱情,我是刑警寧澤脆丁,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布板惑,位于F島的核電站,受9級特大地震影響偎快,放射性物質(zhì)發(fā)生泄漏冯乘。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一晒夹、第九天 我趴在偏房一處隱蔽的房頂上張望裆馒。 院中可真熱鬧,春花似錦丐怯、人聲如沸喷好。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梗搅。三九已至,卻和暖如春效览,著一層夾襖步出監(jiān)牢的瞬間无切,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工丐枉, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留哆键,地道東北人。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓瘦锹,卻偏偏與公主長得像籍嘹,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子弯院,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容