React ES6与ES5写法的区别

来源：互联网发布：淘宝在哪里交保证金编辑：程序博客网时间：2024/05/16 05:55

之前一直用的.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(){    };

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

三、设置默认属性

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));    };

阅读全文

0 0