RN-ES5 ES6写法对比

模块引用

ES5 使用CommonJS 标准， 使用 require

var React = require('react');
var { Component, PropTypes) = React;
var ReactNative = require('react-native');
var {Image, View } = ReactNative

ES6 import 写法

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

导出类

ES5 使用module.exports

var MyComponent = React.createClass({});
module.exxports = MyComponent;

引用=》
var MyComponent = require(./MyComponent)

ES6 使用 export default

export default class MyComponent extends Component {
}

引用=》
import MyComponent from './MyComponent'

定义组件、方法、属性类型 默认属性、初始化state、方法回调

ES5

属性类型和默认属性分别通过propTypes成员和getDefaultProps方法来实现
初始化state getInitialState

var MyComponent = React.createClass({
    getInitialState：function(){
        return {
            name:"xxx",
        };
    }
    
    
    getDefaultProps:function(){
        return {
            name:'xxx',
            number:10,
            show:true,
        }
    }，
    
    propTypes:{
        name:React.PropTypes.string.isRequired,
        number:React.PropTypes.number.isRequired,
        show:React.PropTypes.bool.isRequired,
    }，
    
    componentWillMount:function(){
    
    }，
    
    render:function(){
        return (
            
            
            
        );
    }，
    
    // 事件绑定函数
    handleClick:function(e){
        
    },
});

ES6

属性类型和默认属性统一使用static成员来实现
state 在构造函数中初始化

calss MyComponent extends Component {

static propTypes = {
        name:'xxx',
        number:10,
        show:true,

}; //有分号

static propType = {
        name:React.PropTypes.string.isRequired,
        number:React.PropTypes.number.isRequired,
        show:React.PropTypes.bool.isRequired,
};


constructor(props){
    super(props);
    
    this.state = {
        name:"xxx",
    };
}

componentWillMount (){
    
    }

    render(){
        return (
            
            this.handleClick(e)}
            >
            
        );
    }
    
    handleClick(e){
    }
}