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 (
            <Image source={this.props.source}>
            <TouchableHighlight onPress={this.handleClick}>
            </TouchableHighlight>
        );
    },
    
    // 事件绑定函数
    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 (
            <Image source={this.props.source}>
            <TouchableHighlight 
                onPress={this.handleClick.bind(this)}
                onPress={e=>this.handleClick(e)}
            >
            </TouchableHighlight>
        );
    }
    
    handleClick(e){
    }
}
    
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容