React- event binding

A, class define the components that event bindings are several ways

Since the method does not bind this class of default, so if you forget to call when binding, this value will be undefined. If it is not usually called directly, it should be bound to this method, bindings in the following ways:

　　(A) bind using the constructor this binding

 1 class Button extends React.Component {
 2 constructor(props) {
 3     super(props);
 4     this.handleClick = this.handleClick.bind(this);
 5   }
 6   handleClick(){
 7     console.log('this is:', this);
 8   }
 9   render() {
10     return (
11       <button onClick={this.handleClick}>
12         Click me
13       </button>
14     );
15   }
16 }

　　(B) when using the bind call to bind this

 1 class Button extends React.Component {
 2   handleClick(){
 3     console.log('this is:', this);
 4   }
 5   render() {
 6     return (
 7       <button onClick={this.handleClick.bind(this)}>
 8         Click me
 9       </button>
10     );
11   }
12 }

 1 class Button extends React.Component {
 2   handleClick(){
 3     console.log('this is:', this);
 4   }
 5   render() {
 6     return (
 7       <button onClick={()=>this.handleClick()}>
 8         Click me
 9       </button>
10     );
11   }
12 }

　　(D) the use of direct binding syntax to initialize properties

 1 class Button extends React.Component {
 2   handleClick=()=>{
 3     console.log('this is:', this);
 4   }
 5   render() {
 6     return (
 7       <button onClick={this.handleClick}>
 8         Click me
 9       </button>
10     );
11   }
12 }

Pros and cons of two, comparing the several methods

(Ii) the time and (iii) methods are invoked and then bind this
- Advantages: simple wording, when the assembly is no state without adding a constructor to bind this
- Disadvantages: each call to the method will generate a new instance, and therefore affect performance, and when the property value as a function of the incoming low-level components, these components may be additional re-rendered, because each time as examples of the new method is a new transmission properties.
(A) binding of this method in the constructor, call time does not require a secondary binding
- Advantages: only generate a instance method, bindings and then used many times if one method does not need this bound.
- Cons: Not applicable even when the state also need to bind this in the constructor, the code amount.
(Iv) using the method attribute initialization syntax, the method is initialized to the arrow function, so when it is bound to create a function of this.
- Pros: Create a method to bind this, you do not need to bind the class constructor call when not needed to be binding. The combined mode 1, mode 2, mode 3 has the advantage
- Cons: There is a demand required before the transfer of babel, now with the performance getting better and better, also consider asking this consumption.

Third, the event binding Methods

　　One official recommended way binding way, it is the best way to performance. Second way 和凡是三will affect the performance and properties of the time when the process is passed to a sub-assembly resulting in severe shading problems. Four ways performance is relatively good, now babel has been very mature, we recommend using

React- event binding

Guess you like