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

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

React与ES6系列：

1. React与ES6（一）开篇介绍
2. React和ES6（二）ES6的类和ES7的property initializer
3. React与ES6（三）ES6类和方法绑定
4. React与ES6（四）ES6如何处理React mixins

如果你看到前篇里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里。所以，有些就略去了，其他的可以看看。