Question

将ES5开发与ReactJS一起使用，可以将组件说明如下：

var MyComponent = React.createClass({
  alertSomething: function(event) {
    alert(event.target);
  },

  render: function() {
    return (
      <button onClick={this.alertSomething}>Click Me!</button>
    );
  }
});

ReactDOM.render(<MyComponent />);

在此示例中，this引用对象本身，这是预期的自然行为。

问题

我的问题是：

如何使用ES6创建组件？

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  alertSomething(event) {
    alert(event.target);
  }

  render() {
    return (
      <button onClick={this.alertSomething.bind(this)}>Click Me!</button>
    );
  }
}

ReactDOM.render(<MyComponent />);

知道在JavaScript中this在使用new运算符时引用实例化对象本身，有人可以告诉我使用bind的真正目的是什么？它与React的内部机制有关吗？

Answer 1

bind只是核心javascript。这是绑定事件的工作原理。这不是React概念。

以下文章很好地解释了它。

JavaScript中的有界函数是一个与给定上下文有界的函数。这意味着无论你如何称呼它，呼叫的上下文都将保持不变。

要使用常规函数创建有界函数，请使用bind方法。 bind方法将要绑定函数的上下文作为第一个参数。其余参数是将始终传递给此类函数的参数。它返回一个有界函数。

http://reactkungfu.com/2015/07/why-and-how-to-bind-methods-in-your-react-component-classes/

另外，在旁注中，您应该在构造函数中执行所有事件绑定，而不是在render方法中。这将阻止多个绑定调用。

这是关于这个主题的另一个很好的信息。他们说：

我们建议您在构造函数中绑定事件处理程序，以便它们仅针对每个实例绑定一次

https://facebook.github.io/react/docs/reusable-components.html

Answer 2

React ES6类中bind的目的之一是你必须手动绑定。

无自动装订

方法遵循与常规ES6类相同的语义，这意味着＆gt;它们不会自动将其绑定到实例。您必须＆gt;明确使用.bind（this）或arrow functions =＆gt;：

我们建议您在构造函数中绑定事件处理程序，以便它们仅针对每个实例绑定一次：

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

您可以从文档中了解更多信息：https://facebook.github.io/react/docs/reusable-components.html

Answer 3

var cat = {
  sound: 'Meow!',
  speak: function () { console.log(this.sound); }
};

cat.speak(); // Output: "Meow!"

var dog = {
  sound: 'Woof!'
};
dog.speak = cat.speak;

dog.speak(); // Output: "Woof!"

var speak = cat.speak;
speak(); // Output: "undefined"

speak = cat.speak.bind(dog);
speak(); // Output: "Woof!"

说明：

＆＃34;这个＆＃34;的价值取决于函数的调用方式。当你提供this.alertSomething作为你的按钮的onClick处理程序时，它会改变它的调用方式，因为你提供了对该函数的直接引用，并且它不会被你的对象实例调用（不确定）如果我说的那么正确的话。

.bind函数将返回一个新函数，其中＆＃34; this＆＃34;永久设置为传递给它的值。

ECMAScript 5引入了Function.prototype.bind。调用f.bind（someObject）创建一个具有与f相同的主体和范围的新函数，但是在原始函数中发生这种情况时，在新函数中它永久地绑定到bind的第一个参数，无论函数是如何被使用。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

最好在组件的构造函数中执行此操作，以便.bind只为每个处理程序发生一次，而不是每次渲染。

在使用ES6和ReactJS时，为什么需要使用bind？

3 个答案: