React与ES6（三）ES6类和方法绑定

React与ES6系列：

如果你看到前篇里CartItem的render方法里的这一句：{this.increaseQty.bind(this)}你可能会很意外为什么要bind。

如果把bind删掉的话会怎么样呢？会报错Uncaught TypeError: Cannot read property 'setState' of undeined。

这是因为this.increaseQty的this指向的不是类，而是undefined。ES6的类不支持自动绑定，不能像ES5那样。比如React.createClass()这样全部的内部方法都是自动绑定好了。

下面我们就看看ES6写的React组件类如何绑定内部方法。

方法一、使用Function.prototype.bind()

class CartItem extends React.Component {

    render() {

        return (

            <p className="large-4 column">

                <button onClick={this.increaseQty.bind(this)} className="button success">+</button>

                <button onClick={this.decreaseQty.bind(this)} className="button alert">-</button>

            </p>

        );

    }

}

ES6的类本质就是Javascript方法，从Function的prototype里继承了bind()方法。所以当我们调用increaseQty()方法的时候，this指向了类的实例。你可以在MDN文档里看到更多。

方法二、使用在constructor里定义的方法

这是方法一和constructor的混合使用：

export default class CartItem extends React.Component {

    constructor(props) {

        super(props);

        this.increaseQty = this.increaseQty.bind(this);

    }

    render() {

        <button onClick={this.increaseQty} className="button success">+</button>

    }

}

这个方法就是把bind()方法从JSX定义里换到了类的constructor里。

方法三、使用箭头方法和构造函数

ES6的胖箭头方法被调用的时候保留了this指向的上下文。我们可以使用这一特性在构造函数里重新定义increaseQty()方法。

export default class CartItem extends React.Component {

    constructor(props) {

        super(props);

        // this.state = {

        //     qty: props.initialQty,

        //     total: 0

        // };

        this._increaseQty = () => this.increaseQty();

    }

    render() {

        <button onClick={_this.increaseQty} className="button success">+</button>

    }

}

方法四、使用胖箭头方法和ES2015的class property

export default class CartItem extends React.Component {

    increaseQty = () => this.increaseQty();

    render() {

        <button onClick={this.increaseQty} className="button success">+</button>

    }

因此，类属性非常的简洁。

注意：类属性不是当前Javascript的标准，但是Babel已经支持这个功能（stage 0）。你可以看这里了解更多。

方法五、使用ES2015的方法绑定语法

Babel又加入了对一个语法糖的支持Function.prototype.bind()：::。这里就不介绍这个操作符是怎么工作的了。

export default class CartItem extends React.Component {

    constructor(props) {

        super(props);

        this.increaseQty = ::this.increaseQty;

    }

    render() {

        <button onClick={this.increaseQty} className="button success">+</button>

    }

}

最后

老外介绍的几个方法有点地方差别都不大，有的甚至只是调用的地方从constructor换到了JSX里。所以，有些就略去了，其他的可以看看。

巴特西