模块

导入

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