为什么在使用ES6和ReactJS时需要使用绑定？

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运算符的时候，有人能告诉我什么是使用绑定的真正目的是什么？这与React的内部机制有关？

Answer 1

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

下面的文章解释得很好。

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类，这意味着>它们不会自动绑定到这个实例。你必须>明确使用。绑定（本）或箭头功能=>：

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

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

说明：

的价值 “这一” 取决于如何函数的n正在被调用。当你提供this.alertSomething作为你的按钮的onClick处理函数时，它会改变它的调用方式，因为你提供了对这个函数的直接引用，并且它不会被你的对象实例调用（不知道我是否是那种措辞对）。

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

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

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

这是最好做这在组件的构造函数，以便.bind为每个处理器的发生只有一次，而不是每一个渲染。