React类，要领绑定（第三部份）

这是React和ECMAScript6／ECMAScript7连系运用系列文章的第三篇。

下面是一切系列文章章节的链接：

• React 、 ES6 &＃8211; 引见（第一部份）

• React类、ES7属性初始化（第二部份）

• React类，要领绑定（第三部份）

• ES6中React Mixins的运用（第四部份）

• React 和ES6 之JSPM的运用（第五部份）

• React 和 ES6 事情流之 Webpack的运用（第六部份）

本篇文章Github源码

React	JS

你在看上一篇文章中的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类建立的要领的多种挪用要领。我所考虑到的多种差别的要领都在这个GitHub repository。

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

之前我们已见到过：

export default class CartItem extends React.Component {
render() {
+
}
}

当任何ES6的通例要领在要领原型中举行this绑定时，this指向的是类实例。假如你想相识更多Function.prototype.bind(),你能够接见这篇MDN博客

Method 2. 在组织函数中定义函数

此要领是上一个与类组织函数的用法的夹杂：

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

你不要再次在JSX代码的别的处所举行绑定，然则这将增添组织函数中的代码量。

Method 3. 运用箭头函数和组织函数

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

当要领被挪用时，ES6 fat arrow functions会保存上下文。我们能运用这个特征用下面的要领在组织函数中重定义increaseQty()函数。

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

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

别的，你能够运用ES2015+类属性语法和箭头函数：

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

属性初始化和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() {
+
}
}

强调：这个特征是高度的试验，运用它你得本身负担风险。

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() {
+
}
}

异常简约，唯一的瑕玷是，这个函数将在每一个后续衬着组件上从新建立。这不是最好的。更主要的是，假如你运用像PureRenderMixin的东西将会涌现。

结论

在这篇文章中，我们已发明了多种React组建类要领的绑定要领。

参考文档

• About autobinding in official React blog

• Autobinding, React and ES6 Classes

• Function Bind Syntax in official Babel blog

• Function.prototype.bind()

• Experimental ES7 Class Properties

• Experimental ES7 Function Bind Syntax

扫码申请加入全栈部落