原文

很多React/React Native的初学者都被ES6的问题迷惑：各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component)，然而网上搜到的很多教程和例子都是ES5版本的，所以很多人在学习的时候连照猫画虎都不知道怎么做。今天在此整理了一些ES5和ES6的写法对照表，希望大家以后读到ES5的代码，也能通过对照，在ES6下实现相同的功能。

模块

引用

在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：

//ES5
var React = require("react-native");
var {
 Image,
 Text,
 PropTypes
} = React; //引用不同的React Native组件

在ES6里，import写法更为标准

//ES6
import React, {
 Image,
 Text,
 PropTypes
} frxm 'react-native';

注意在React Native里，import直到0.12+才能正常运作。

导出单个类

在ES5里，要导出一个类给别的模块用，一般通过module.exports来导出

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

在ES6里，通常用export default来实现相同的功能：

//ES6
export default class MyComponent extends React.Component{
 ...
}

引用的时候也类似：

//ES5
var MyComponent = require('./MyComponent.js');

//ES6
import MyComponent from './MyComponent.js';

定义组件

在ES5里，通常通过React.createClass来定义一个组件类，像这样：

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