React ES6与ES5写法的区别

之前一直用的.net开发，react的写法也一直用的ES5的写法，觉得越来越out了，正好在学node，很多都用ES6的写法，就开始总结了一些React的ES6的写法。主要有以下几个方面：

一、组件的创建

ES5(React.createClass)

import React from 'react';

const SkillComponent = React.createClass({
    render:function(){
        return(
            <div>
                <h2>我是技能</h2>
            </div>
        )
    }
})
export default SkillComponent

ES6(React.Component)

import React, { Component } from 'react';
class SkillComponent extends Component{
    render(){
        return(
            <div>
                <h2>我是技能</h2>
            </div>
        )
    }
}
export default SkillComponent

二、组件内定义方法

ES5中组件定义方法是

    componentDidMount:function(){
        
    },

注意，方法结束后必须写','

ES6中组件定义的方法是

    componentDidMount(){

    };

注意，方法后的';'可写可不写；

三、设置默认属性

扫描二维码关注公众号，回复： 2817106 查看本文章

ES5中默认属性通过 getDefaultProps定义在组件的内部

import React from 'react';
const SkillComponent = React.createClass({
    getDefaultProps: function () {
        return {
            defaultString: '',
            defaultArr:[],
            defaultObject:{},
            defaultBool:true
        };
    },
    componentDidMount:function(){
    },
    render:function(){
        return(
            <div>
                <h2>我是技能</h2>
            </div>
        )
    }
})
export default SkillComponent

ES6中需要通过在constructor构造函数中调用super将props传递给组件并定义在组件的外部

import React, { Component } from 'react';
class SkillComponent extends Component{
    constructor(props) {
        super(props);
    };    
    componentDidMount(){

    };
    render(){
        return(
            <div>
                <h2>我是技能</h2>
            </div>
        )
    }
}
SkillComponent.propTypes = {
    defaultString: React.PropTypes.string.isRequired,
    defaultArr: React.PropTypes.array.isRequired,
    defaultObject : React.PropTypes.object.isRequired,
    defaultBool:React.PropTypes.bool.isRequired

};
SkillComponent.defaultProps = {
    defaultString: '',
    defaultArr:[],
    defaultObject:{},
    defaultBool:true
};
export default SkillComponent

四、初始化状态（state）

ES5中初始化状态通过getInitialState函数定义

import React from 'react';
const SkillComponent = React.createClass({
    getInitialState:function(){
        return{
            dataSource:{}
        }
    },
    render:function(){
        return(
            <div>
                <h2>我是技能</h2>
            </div>
        )
    }
})
export default SkillComponent

ES6中初始化状态通过this.state()定义在构造函数内

import React, { Component } from 'react';
class SkillComponent extends Component{
    constructor(props) {
        super(props);
        this.state = {
            dataSource: {}
        }
    };
    render(){
        return(
            <div>
                <h2>我是技能</h2>
            </div>
        )
    }
}
export default SkillComponent

五、全局变量

ES5中全局变量定义在组件内

import React from 'react';
const SkillComponent = React.createClass({
    serialNumAll:null,
    render:function(){
        return(
            <div>
                <h2>我是技能</h2>
            </div>
        )
    }
})
export default SkillComponent

ES6中全局变量在构造函数 constructor()中定义

import React, { Component } from 'react';
class SkillComponent extends Component{
    constructor(props) {
        super(props);
        this.serialNumAll=null,
    };
    componentDidMount(){

    };
    render(){
        return(
            <div>
                <h2>我是技能</h2>
            </div>
        )
    }
}
export default SkillComponent

六、this的指向

ES5中，React.createClass会把所有的方法都绑定（bind）一遍，在任意地方都可以作为回调函数

import React from 'react';
const SkillComponent = React.createClass({
    handleClick:function(){
        console.log(this);
    },
    render:function(){
        return(
            <div>
                <h2>我是技能</h2>
                <input type="button" onclick={this.handleClick}/>
            </div>
        )
    }
})
export default SkillComponent

ES6中，在函数调用的时候绑定（this）或运用箭头函数或者绑定在构造函数内部 constructor()

import React, { Component } from 'react';
class SkillComponent extends Component{
    handleClick(){
        console.log(this);
    } 
    render(){
        return(
            <div>
                <h2>我是技能</h2>
                <input type="button" onclick={this.handleClick.bind(this)}/>
            </div>
        )
    }
}
export default SkillComponent

import React, { Component } from 'react';
class SkillComponent extends Component{
    handleClick = () => {
        console.log(this);
    } 
    render(){
        return(
            <div>
                <h2>我是技能</h2>
                <input type="button" onclick={this.handleClick.bind(this)}/>
            </div>
        )
    }
}
export default SkillComponent

import React, { Component } from 'react';
class SkillComponent extends Component{
    constructor(props) {
        super(props);
        this.serialNumAll=null,
        this.state = {
            dataSource: {}
        },
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick(){
        console.log(this);
    }
    render(){
        return(
            <div>
                <h2>我是技能</h2>
                <input type="button" onclick={this.handleClick.bind(this)}/>
            </div>
        )
    }
}
export default SkillComponent

七、ajsx

ES5

    findDataSource:function(bdate) {
        $.get(WebServiceBaseUrl + '/ProjectManage/ProjectAssessSource?bdate=' + bdate, function (result) {
            if (this.isMounted()) {
                this.setState({
                    dataSource: result
                });
            }
        }.bind(this));
    },

ES6中废弃了 isMounted()

    findDataSource(busType, busStatus, company, buyDate, serviceLine) {
        $.get(WebServiceBaseUrl + '/ProjectManage/ProjectAssessSource?bdate=' + bdate, function (result){
            this.setState({
                dataSource: result
            });
        }.bind(this));
    };

React ES6与ES5写法的区别

猜你喜欢