将React组件迁移到ES6最佳实践

将React组件迁移到ES6最佳实践

React从0.13版本开始,鼓励你使用ES6的方式去写组件。那么当你想将之前用 createClass的方式写的组件迁移到es6类定义的方式需要注意哪些呢?下面我来列举一下,希望对你有帮助。

1.替换 createClass 组件定义为ES6类定义组件

原来的方式:
var MyComponent = React.createClass({  
    render: function() {
        return <div onClick={this._onClick}>Hello, world.</div>;
    },
    _onClick: function() {
        console.log(this);
    }
});
ES6的方式:
class MyComponent extends React.Component {  
    render() {
        return <div onClick={this._onClick}>Hello, world.</div>;
    }
    _onClick() {
        console.log(this);
    }
}

2.将propTypes、getDefaultTypes等类属性移到类外面定义

由于ES6类中只允许定义方法并不允许定义类属性,所以像原先会在 createClass 中定义的 propTypes 、 getDefaultTypes 、 displayName 还有 contextTypes 等组件属性都要放到类外面来赋值。

原来的方式:
var MyComponent = React.createClass({  
    displayName:'MyComponent',
    propTypes: {
        prop1: React.PropTypes.string
    },
    getDefaultProps: function() {
        return { prop1: '' };
    }
});
ES6的方式:
class MyComponent extends React.Component {...}  
MyComponent.displayName = 'MyComponent';  
MyComponent.propTypes = {  
    prop1: React.PropTypes.string
}
MyComponent.defaultProps = {  
    return { prop1: '' };
}

3.手动绑定类实例到类方法(或回调函数)上

原来使用 createClass 方式创建的方法在使用的时候默认都绑定的到了它创建的组件实例上,这其实是React提供的语法糖,但新版本的ES6写法上,他们没有再提供,需要你按需手动绑定。如果你感兴趣的话,你可以看下他们对此的解释: autobinding

原来的方式:
var MyComponent = React.createClass({  
    render: function() {
        return <div onClick={this._onClick}>Hello, world.</div>;
    },
    _onClick: function() {
        console.log(this);// 输出: MyComponent 
    }
});
ES6不正确的方式:
class MyComponent extends React.Component {  
    render() {
        return <div onClick={this._onClick}>Hello, world.</div>;
    }
    _onClick() {
        console.log(this); // 输出: undefined
    }
}
ES6正确的方式:
class MyComponent extends React.Component {  
    constructor() {
        super();
        this. _onClick = this. _onClick.bind(this);
    }
    render() {
        return <div onClick={this._onClick}>Hello, world.</div>;
    }
    _onClick() {
        console.log(this); // 输出: MyComponent
    }
}

当然,你也可以在一个基类中定义一个工具方法专门用来绑定,然后子类中直接传个方法名就可以实现了,不用每次写这么多重复代码。

4.将state初始化移到构造函数constructor中来做

即 getInitialState 在ES6方式定义将无效,不会在初始化的时候运行。你需要将在 getInitialState 里面的工作移到 constructor 中来做。

原来的方式:
class MyComponent extends React.Component {  
    getInitialState() {
        return Store.getState();
    }
    constructor() {
        super();
        this. _onClick = this. _onClick.bind(this);
    }
}
ES6的方式:
class MyComponent extends React.Component {  
    constructor() {
        super();
        this. _onClick = this. _onClick.bind(this);
        this.state = Store.getState();
    }
    // ...
}

----------------------------------
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值