语法对照表ES5VSES6

模块

导入

在ES5里面，如果使用CommonJS的标准，引入包一般是使用require来的

//ES5

  var React = require("react")
  var {
      Component,
      ProTypes
  } = React //引入React的抽象类
  var ReactNative = require("react-native");
  var {
      Image,
      Text
  }=ReactNative //引入具体的RN组件

在ES6里，采用import来引入

  ES6
  import React,{
      Component,
      ProTypes
  } from 'react'
  import {
      Image,
      Text
  } from 'react-native'

类的导出导入

在ES里面 要导出一个类给别的模块用，一般是采用module.exports 来的

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

在ES6 采用export default

   export default class MyComponet 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
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 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>
        )
    },
}

其他

// 正确的做法
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){
    }
}

ES6+带来的其它好处

解构&属性延展

结合使用ES6+的解构和属性延展，我们给孩子传递一批属性更为方便了。这个例子把className以外的所有属性传递给div标签：

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，则提供默认的值，而如果属性中已经包含了，则使用属性中的值

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