摘要：使用箭头函数和构造函数当方法被调用时，会保留上下文。我们能使用这个特征用下面的方法在构造函数中重定义函数。在调用方法的方使用函数绑定语法你也可以直接在非构造函数里面的里面直接使用函数绑定。
这是React和ECMAScript6／ECMAScript7结合使用系列文章的第三篇。
下面是所有系列文章章节的链接：
React 、 ES6 - 介绍（第一部分）
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
| 扫码申请加入全栈部落 |
|---|
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/83982.html
摘要：绑定事件处理函数指向的四中方式以及他们的优缺点。内部自己实现了一套高效的事件机制，为了提高框架的性能，通过事件冒泡，只在节点上注册原生的事件，内部自己管理所有组件的事件处理函数，以及事件的冒泡捕获。 前面的文章介绍了 React 的 JSX 语法、组件的创建方式、组件的属性、组件的内部状态以及组件的生命周期。另外，还顺带说了各个知识点要重点注意的事情，以及我在项目实践中的一些经验。如果...
摘要：函数绑定的方式一般有下面种方式绑定构造函数中绑定然后可以使用时绑定使用箭头函数以上三种方法，第一种最优。因为第一种构造函数只在组件初始化的时候执行一次，第二种组件每次都会执行第三种在每一次时候都会生成新的箭头函数。 这篇文章主要介绍了浅谈react性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 React性能优化思路 软件的性能优化思路就像生...
摘要：函数绑定的方式一般有下面种方式绑定构造函数中绑定然后可以使用时绑定使用箭头函数以上三种方法，第一种最优。因为第一种构造函数只在组件初始化的时候执行一次，第二种组件每次都会执行第三种在每一次时候都会生成新的箭头函数。 这篇文章主要介绍了浅谈react性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 React性能优化思路 软件的性能优化思路就像生...
摘要：函数绑定的方式一般有下面种方式绑定构造函数中绑定然后可以使用时绑定使用箭头函数以上三种方法，第一种最优。因为第一种构造函数只在组件初始化的时候执行一次，第二种组件每次都会执行第三种在每一次时候都会生成新的箭头函数。 这篇文章主要介绍了浅谈react性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 React性能优化思路 软件的性能优化思路就像生...
摘要：处理事件响应是应用中非常重要的一部分。中，处理事件响应的方式有多种。关于事件响应的回调函数，还有一个地方需要注意。不管你在回调函数中有没有显式的声明事件参数，都会把事件作为参数传递给回调函数，且参数的位置总是在其他自定义参数的后面。 React中定义一个组件，可以通过React.createClass或者ES6的class。本文讨论的React组件是基于class定义的组件。采用cla...
阅读 1561·2021-09-26 09:47
阅读 2599·2021-09-02 15:11
阅读 2369·2020-12-03 17:07
阅读 798·2019-08-26 18:18
阅读 1755·2019-08-26 11:57
阅读 3132·2019-08-23 16:59
阅读 1824·2019-08-23 16:51
阅读 2199·2019-08-23 16:11
