为什么要使用绑定与ES6和ReactJS工作时？为什么要使用绑定与ES6和ReactJS工作时？(W

使用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运算符时，引用实例化对象本身，有人能告诉我什么是使用绑定的真正目的是什么？这是值得相关反应的内部机制？

Answer 1:

bind仅仅是核心JavaScript。这是事件是如何结合的作品。这不是一个阵营的概念。

下面的文章解释了它相当不错。

在JavaScript界函数是有界的给定范围内的功能。这意味着，无论你怎么称呼它，呼叫的情况下将保持不变。
以创建有界函数出常规的功能，则使用绑定方法。绑定方法取上下文来要你的函数绑定作为第一个参数。参数的其余部分是将要始终传递给这样的函数的参数。它返回一个有界函数的结果。

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

此外，在一个侧面说明，你应该做的所有事件在你的构造结合，而不是在渲染方法。这将防止多种绑定的电话。

下面是关于这个问题的信息的另一个好一点。他们说：

我们建议您绑定你的事件处理程序的构造函数，因此他们只为每个实例绑定一次

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

Answer 2:

的目的一个bind的阵营ES6类是，你必须手动绑定。

没有自动绑定
方法遵循相同的语义规则ES6类，这意味着>它们不会自动绑定到这个实例。你必须>明确使用.bind（本）或箭头功能=>：
我们建议您绑定你的事件处理程序的构造函数，因此它们>只为每个实例绑定一次：

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!"

说明：

的价值“这一”取决于函数是如何被调用。当您提供this.alertSomething作为按钮的onClick处理程序，它的变化将如何叫，因为您提供的直接引用该函数，它不会对你的对象实例调用（不知道如果我的措辞是对）。

该.bind函数会返回一个新的功能，其中“这个”永久设置为传递给它的值。