前言

相信很多React的初學(xué)者都被ES6的問(wèn)題迷惑：各路大神都建議我們直接學(xué)習(xí)ES6的語(yǔ)法(class Foo extends React.Component)，然而網(wǎng)上搜到的很多教程和例子都是ES5版本的，所以很多人在學(xué)習(xí)的時(shí)候連照貓畫虎都不知道怎么做。所以這篇文章就整理了一些ES5和ES6的寫法對(duì)照表，希望大家以后讀到ES5的代碼，也能通過(guò)對(duì)照，在ES6下實(shí)現(xiàn)相同的功能。下面話不多說(shuō)了，來(lái)看看詳細(xì)的介紹吧。

模塊

引用

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

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

//ES6import React, {  Component, PropTypes,} from 'react';import { Image, Text} from 'react-native'

導(dǎo)出單個(gè)類

在ES5里，要導(dǎo)出一個(gè)類給別的模塊用，一般通過(guò)module.exports來(lái)導(dǎo)出

//ES5var MyComponent = React.createClass({ ...});module.exports = MyComponent;

在ES6里，通常用export default來(lái)實(shí)現(xiàn)相同的功能：

//ES6export default class MyComponent extends Component{ ...}

引用的時(shí)候也類似：

//ES5var MyComponent = require('./MyComponent');//ES6import MyComponent from './MyComponent';

注意：導(dǎo)入和導(dǎo)出的寫法必須配套，不能混用！

定義組件

在ES5里，通常通過(guò)React.createClass來(lái)定義一個(gè)組件類，像這樣：

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

在ES6里，我們通過(guò)定義一個(gè)繼承自React.Component的class來(lái)定義一個(gè)組件類，像這樣：

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

給組件定義方法

從上面的例子里可以看到，給組件定義方法不再用 名字: function()的寫法，而是直接用名字()，在方法的最后也不能有逗號(hào)了。

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

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

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

在ES5里，屬性類型和默認(rèn)屬性分別通過(guò)propTypes成員和getDefaultProps方法來(lái)實(shí)現(xiàn)