react.js - [react]有关ES6 class方式创建组件的问题

问题描述

问 题

用ES6 class创建React组件时，有一个问题，事件无自动绑定，官网上解释如下：

"方法遵循正式的ES6 class的语义，意味着它们不会自动绑定this到实例上。建议在构造函数中绑定事件处理器，这样对于所有实例它们只需绑定一次："

In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind this to the instance. You'll have to explicitly use .bind(this) in the constructor:

constructor(props) {
  super(props);
  this.state = {count: props.initialCount};
  this.tick = this.tick.bind(this);
}

tick() {
    // do something
}

加粗部分不太理解。ES6 class的语法，并没有提到this不会自定绑定在类实例上，那么，该如何理解文档中的这段话呢？

求大神解答，万分感谢！

解决方案

React 表示这个锅我不背。

原文的意思是，使用 ES6 的 class 定义 React 组件时，和常规的 ES6 类是一样的。也就是说，并不是 React 不自动绑定 this，而且 ES6 class 本来就不自动绑定 this。

在 javascript 中最难的地方就是 this 的动态行了。你可以这么理解：

在函数中使用的 this，绑定的是运行时的对象，而不是定义时的对象。

当我们调用 tick 函数时，我们会觉得里面的 this 是当前组件，毕竟 tick 是在这个组件中被定义的。但实际情况 this 不一定是当前组件。所以需要在构造函数里面调用 this.tick = this.tick.bind(this);，把 this 绑定到当前组件上。

什么是运行时的对象？我们一般会把 tick 绑定到一个 Button 组件的 click 事件上，那么当我们点击按钮时运行 tick，那么此时 tick 的 this 是 Button 组件，而不是定义 tick 函数的组件。

这篇关于react.js - [react]有关ES6 class方式创建组件的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！