相信很多React的初学者都被ES6的问题迷惑：各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component)，然而网上搜到的很多教程和例子都是ES5版本的，所以很多人在学习的时候连照猫画虎都不知道怎么做。所以这篇文章就整理了一些ES5和ES6的写法对照表，希望大家以后读到ES5的代码，也能通过对照，在ES6下实现相同的功能。下面话不多说了，来看看详细的介绍吧。
模块
引用
在ES5里，如果使用CommonJS标准，引入React包基本通过require进行，代码类似这样：
//ES5 var React = require("react"); var { Component, PropTypes } = React; //引用React抽象组件 var ReactNative = require("react-native"); var { Image, Text, } = ReactNative; //引用具体的React Native组件
在ES6里，import写法更为标准
//ES6 import React, { Component, PropTypes, } from 'react'; import { Image, Text } from 'react-native'
导出单个类
在ES5里，要导出一个类给别的模块用，一般通过module.exports来导出
//ES5 var MyComponent = React.createClass({ ... }); module.exports = MyComponent;
在ES6里，通常用export default来实现相同的功能：
//ES6 export default class MyComponent extends Component{ ... }
引用的时候也类似：
//ES5 var MyComponent = require('./MyComponent'); //ES6 import MyComponent from './MyComponent';
注意：导入和导出的写法必须配套，不能混用！
定义组件
在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} /> ); } }
定义组件的属性类型和默认属性
在ES5里，属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现
//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里，可以统一使用static成员来实现
//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 /> ); } // 注意这里既没有分号也没有逗号 }
也有人这么写，虽然不推荐，但读到代码的时候你应当能明白它的意思：
//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开发者而言，static成员在IE10及之前版本不能被继承，而在IE11和其它浏览器上可以，这有时候会带来一些问题。React Native开发者可以不用担心这个问题。
初始化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, } }
不过我们推荐更易理解的在构造函数中初始化（这样你还可以根据需要做一些计算）：
//ES6 class Video extends React.Component { constructor(props){ super(props); this.state = { loopsRemaining: this.props.maxLoops, }; } }
把方法作为回调提供
很多习惯于ES6的用户反而不理解在ES5下可以这么做：