为什么这个回调函数不添加bind.(this)？答案

【问题标题】：Why does this callback function not add bind.(this)?为什么这个回调函数不添加bind.(this)？
【发布时间】：2017-06-05 04:20:33
【问题描述】：

据我所知，每次将自定义函数传递给 onChange 或 onSubmit 等事件处理程序时，我们都需要使用 .bind

在下面的示例中，我们将事件处理程序（talk 函数）作为道具传递。当用户点击按钮时，会调用talk函数。

var React = require('react');
var ReactDOM = require('react-dom');
var Button = require('./Button');

var Talker = React.createClass({
  talk: function () {
    for (var speech = '', i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  },

  render: function () {
    return <Button talk={this.talk}/>;
  }
});

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

Button.js

var React = require('react');

var Button = React.createClass({
  render: function () {
    return (
      <button onClick={this.props.talk}>
        Click me!
      </button>
    );
  }
});

module.exports = Button;

本示例使用 Button talk={this.talk} 而不是 Button {this.talk.bind.(this)}
，但是为什么呢？

【问题讨论】：

如果函数内部需要this来引用特定值，则只需要.bind。由于talk 不访问this，所以.bind 不是必需的。还有一个事实是 React.createClass 自动绑定每个方法，但这在您的示例中并没有什么不同。

标签： javascript reactjs

【解决方案1】：

.bind 用于确保使用类的上下文而不是调用者的上下文调用函数。

当您在函数中访问类属性时尤其需要它。例如，如果您的 speech 变量是类变量而不是本地变量。

talk: function () {
    for (this.speech = '', i = 0; i < 10000; i++) {
      this.speech += 'blah ';
    }
    alert(this.speech);
  },

在这种情况下，您需要bind。

您的talk 函数没有这样做。它有自己的局部变量，因此可以使用任何this 上下文调用。

talk={this.talk} 将在这里工作。

问题中绑定函数的语法也不正确。它必须是this.talk.bind(this) 而不是this.talk.bind.(this)

【讨论】：

我认为这里的所有答案都是正确的，但这种解释对其他人来说更容易理解。

【解决方案2】：

在使用 createClass 时会出现这种行为，其中 React 将每个方法（自定义方法和 React 组件 API 的方法）绑定到它们的组件，从而导致“this”可用。在使用 ES6 .... extends React.Component 时不能这样说，其中 react 仅将 'this' 绑定到 react 组件 API 方法。

另外，你不需要每次在你的渲染方法中使用 ES6 时都执行 this.talk.bind(this)，而是

你可以

constructor () {
    super()
    this.talk = this.talk.bind(this)
}

并在其中的任何地方使用 this.talk()。

深入解释，https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/

【讨论】：

有趣..虽然你的语法错误..它必须是this.talk.bind(this)。你在那里添加了一个额外的.。

【解决方案3】：

因为，基本上，.bind 会将特定对象“绑定”到“this”。但是由于该函数没有使用“this”，所以绑定与否无关紧要。

如果在函数 talk 中您引用了“Talker”类的实例。那是您开始遇到问题的那一刻。

【讨论】：

【解决方案4】：

在这种情况下，如果组件Talker 在另一个组件中使用，您想使用bind。如果是这种情况，Talker 组件中的this 将引用另一个组件。在您当前的情况下，它被传递给按钮。因此，需要使用bind 来确保它是从Talker 而不是Button 组件调用的。

【讨论】：