Part 3, Binding to methods of React class (ES7 included)

Original 2017-02-23 黎跃春 一起众创

这是React和ECMAScript6／ECMAScript7结合使用系列文章的第三篇。

下面是所有系列文章章节的链接：

你在看中的CartItem render 方法中使用{this.increaseQty.bind(this)}代码时，你肯定会觉得困惑。

如果我们尝试将{this.increaseQty.bind(this)}代码替换成{this.increaseQty},我们将在浏览器控制台中发现如下错误：Uncaught TypeError: Cannot read property 'setState' of undefined.

这是因为我们当我们调用一个用那种方法绑定的方法时，this不是类它本身，this未定义。相反，如果在案例中，React.createClass()所有的方法将会自动绑定对象的实例。这可能是一些开发者的直觉。

No autobinding was the decision of React team when they implemented support of ES6 classes for React components. You could find out more about reasons for doing so in this blog post.

当React team通过ES6来实现对React 组建的支持时，没有设置自动绑定是React team的一个决定。在中你能发现更多关于为什么这么处理的原因。

现在让我们来看看在你的JSX案例中，使用ES6类创建的方法的多种调用方法。我所考虑到的多种不同的方法都在。

Method 1. 使用Function.prototype.bind().

之前我们已经见到过：

export default class CartItem extends React.Component {
    render() {        <button onClick={this.increaseQty.bind(this)} className="button success">+</button>
    }
}

当任何ES6的常规方法在方法原型中进行this绑定时，this指向的是类实例。如果你想了解更多Function.prototype.bind(),你可以访问

Method 2. 在构造函数中定义函数

此方法是上一个与类构造函数的用法的混合：

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

你不要再次在JSX代码的其它地方进行绑定，但是这将增加构造函数中的代码量。

Method 3. 使用箭头函数和构造函数

preserve this context when they are called. We could use this feature and redefine increaseQty() inside constructor in the following way:

当方法被调用时，会保留上下文。我们能使用这个特征用下面的方法在构造函数中重定义increaseQty()函数。

export default class CartItem extends React.Component {

    constructor(props) {        super(props);        this._increaseQty = () => this.increaseQty();
    }

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

Method 4. 使用箭头函数和ES2015+类属性

另外，你可以使用ES2015+类属性语法和箭头函数：

export default class CartItem extends React.Component {

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

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

属性初始化和Method 3中的功能一样。

警告: 类属性还不是当前JavaScript标准的一部分。但是你可以在Babel中自由的使用他们。你可以在中了解更多类属性的使用。

Method 5. 使用 ES2015+ 函数绑定语法.

最近，Babel介绍了Function.prototype.bind()中::的使用。在这里我就不深入细节讲解它工作的原理。有很多其它的小伙伴已经有很完美的解释。你可以Google搜索blog 2015 function bind了解更多细节。

下面是ES2015+函数绑定的使用：

export default class CartItem extends React.Component {

    constructor(props) {        super(props);        this.increaseQty = ::this.increaseQty;        // line above is an equivalent to this.increaseQty = this.increaseQty.bind(this);
    }

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

强调：这个特性是高度的实验，使用它你得自己承担风险。

Method 6. 在调用方法的方使用 ES2015+ 函数绑定语法.

You also have a possibility to use ES2015+ function bind syntax directly in your JSX without touching constructor. It will look like:

你也可以直接在非构造函数里面的JSX里面直接使用ES2015+函数绑定。效果如下：

export default class CartItem extends React.Component {
    render() {        <button onClick={::this.increaseQty} className="button success">+</button>
    }
}

非常简洁，唯一的缺点是，这个函数将在每个后续渲染组件上重新创建。这不是最佳的。更重要的是，如果你使用像PureRenderMixin的东西将会出现。