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部分问题。

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

由于

Answer 1

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

this.handleRefreshClick.bind(something)会返回一个新功能，其中对this的引用将引用something。这是一种保存this的当前值的方法，该值在调用构造函数期间在范围内，以便稍后在调用函数时可以使用它。

如果您的功能不需要访问组件的状态，那么您肯定不需要绑定它们。

支持将这些行添加到构造函数的论据是，每个类的实例只创建一次新的绑定函数。你也可以使用

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

或（ES6）：

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

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

Answer 2

这两个函数handleChange和handleRefreshClick作为props传递给其他组件，

它们绑定到此，因为当子组件调用这些函数时，它们将始终使用APP上下文执行。

您可以从课程中删除这些功能但仍然需要绑定它，因为您要更新APP的某些部分

Answer 3

完成它的原因是将this关键字绑定到该对象。就像Tom说的那样，从一个类调用一个函数并不意味着它是用创建该函数的对象的上下文调用的。

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

这是因为React不想搞乱ES6规范（绑定this到其类中的函数不在ES6类规范中），但与此同时，希望为用户提供ES6类语法的便利。您可以在下面阅读更多相关信息。

Github issue

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

Answer 4

我个人在构造函数中绑定函数，以便它们的引用在每次重新渲染时都不会改变。

如果您将功能传递给只读儿童时，这一点尤其重要，因为他们的道具不会发生变化时您不需要更新。我使用react-addons-pure-render-mixin。

否则，在每个父母的重新渲染上，将发生绑定，新的函数引用将被创建并传递给子节点，这将认为道具已经改变。

Answer 5

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

当您查看代码时，会看到两个“ this”，为什么？看起来很奇怪，对不对？ 问题是它与外观无关。关于它的调用方式。

您基本上是在说。嘿，当有人打电话给您时，请记住this是指此类。没有别的。

有人打电话给您的班级，例如：x.yourClass()时，您说的this不是x，而是班级本身（带有道具和状态等）。

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

5 个答案: