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

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

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

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

export default class CartItem extends React.Component {
          constructor(props) {
              super(props);        this.increaseQty = this.increaseQty.bind(this);    }    render() {
                  }}

这个方法就是把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() {
                    }}

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

export default class CartItem extends React.Component {
          increaseQty = () => this.increaseQty();    render() {
                  }

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

注意：类属性不是当前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() {
                  }}

最后

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

欢迎加群互相学习，共同进步。QQ群：iOS: 58099570 | Android: 572064792 | Nodejs：329118122 做人要厚道，转载请注明出处！

本文转自张昺华-sky博客园博客，原文链接：http://www.cnblogs.com/sunshine-anycall/p/5888242.html

，如需转载请自行联系原作者