为什么需要在构造函数中绑定一个函数

Question

我有一个与此代码相关的问题:https://github.com/reactjs/redux/blob/master/examples/async/containers/App.js

特别:

  constructor(props) {
    super(props)
    this.handleChange = this.handleChange.bind(this)
    this.handleRefreshClick = this.handleRefreshClick.bind(this)
  }

我想这是一个2部分的问题.

1. 为什么我需要将句柄更改设置为类的实例,this.handleChange =我不能只使用handleChange的静态函数并直接在类中调用它 onClick={handleRefreshClick}>？
2. 我不知道这里发生了什么: this.handleRefreshClick.bind(this)

谢谢

Answer 1

以相反的顺序回答......

2. this.handleRefreshClick.bind(something)返回一个新函数,其中引用this将引用something.这是一种this在调用构造函数时保存当前值的方法,以便稍后在调用函数时使用它.

1. 如果您的函数不需要访问组件的状态,那么您不需要绑定它们.

支持将这些行添加到构造函数的论据是,新的绑定函数仅在每个类的实例中创建一次.你也可以用

onClick={this.handleRefreshClick.bind(this)}

或(ES6):

onClick={() => this.handleRefreshClick()}

但是每次重新渲染组件时,这些方法中的任何一个都会创建一个新函数.

Answer 2

这样做的原因是将this关键字绑定到该对象。就像 Tom 所说，从类中调用函数并不意味着它是在创建该函数的对象的上下文中调用的。

我认为您可能会感到困惑，因为在 React 示例/教程中，使用 React.createClass()确实会this自动为您绑定。所以你可能想知道为什么 React.createClass() 会这样做，但 ES6 类语法却没有这样做。

这是因为 React 不想扰乱 ES6 规范（thisES6 类规范中没有从其类绑定到函数），但同时又希望为用户提供 ES6 类语法的便利。您可以在下面阅读更多相关内容。

Github问题

希望这能解释为什么会发生这种情况。

Answer 3

this取决于函数的调用方式，而不是函数的创建方式/位置。

当你看代码时，你会看到两个“this”，为什么？看起来很奇怪，对吧？ 问题是，事情的关键并不在于它看起来如何。这是关于如何称呼它的。

你基本上是在说。嘿，当有人打电话给你时，请记住this是这门课。不是别的东西。

当有人这样称呼你的类时： x.yourClass().bind(this)你说的this不是x类本身（带有道具和状态等）。

快速注意，即使当您像实际在 browser 上yourClass()调用一样直接调用类时，这也是为什么在这种情况下 this is window.window.yourClass()