Why is it necessary to use bind when working with ES6 and ReactJS?

Question

Using ES5 development with ReactJS, a component can be specified as follows:

var MyComponent = React.createClass({ alertSomething: function(event) { alert(event.target); }, render: function() { return ( <button onClick={this.alertSomething}>Click Me!</button> ); } }); ReactDOM.render(<MyComponent />); 

In this example, this refers to the object itself, which is the expected natural behavior.

Question

My question is:

How do you use ES6 to create components?

 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 />); 

Knowing that in JavaScript this refers to the instance of the object itself when using the new operator, can someone tell me what is the real purpose of using bind? Is this something related to the internal mechanisms of React?

Answer 1

bind is just basic javascript. This is how the connecting event works. This is not a React concept.

The following article explains this pretty well.

A restricted function in JavaScript is a function limited to a given context. This means that no matter what you call it, the call context will remain the same.

To create a bounded function from a regular function, the binding method is used. The bind method takes the context to which you want to bind your function as the first argument. The remaining arguments are arguments that will always be passed to such a function. As a result, it returns a limited function.

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

Also, on the side of the note, you should do all the event bindings in your constructor, and not in the rendering method. This will prevent multiple calling calls.

Here's another good bit of information on this. They speak:

We recommend that you bind event handlers in the constructor so that they only bind once for each instance.

https://facebook.imtqy.com/react/docs/reusable-components.html

Answer 2

one of the bind goals in React ES6 classes is that you have to bind manually.

No autoobject

Methods correspond to the same semantics as regular ES6 classes, which means that> they do not automatically associate this with an instance. You will need to> explicitly use .bind (this) or arrow functions =>:

We recommend that you bind event handlers in the constructor so that they> bind only once for each instance:

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

you can read more from the docs: https://facebook.imtqy.com/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!" 

Explanation:

The value of "this" depends on how the function is called. When you provide this.alertSomething as the onClick handler on the button, it changes the way it is called, since you provide a direct link to this function, and it will not be called against your instance of the object (not sure if I formulate this on the right).

The .bind function will return a new function, where "this" is constantly given the value passed to it.

ECMAScript 5 introduces Function.prototype.bind. Calling f.bind (someObject) creates a new function with the same body and scope as f, but where it happens in the original function, in the new function it is constantly associated with the first argument of bind, regardless of how this function is used.

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

This is best done in the component constructor, so .bind happens only once for each of your handlers, and not for each rendering.