React event binding implementation and difference

1. What is it

In react application, event names are written in small camel format.For example, onclick should be rewritten as onClickThe simplest binding event is as follows:

class ShowAlert extends {
    ShowAlert(){
        ('hello')
    }
    render(){
        return <button onClick={}>show</button>
    }
}

As can be seen from the above, it seems that there is no problem with the event binding method to use {} to wrap the above code, but when you currently process the function code or change it to (this), click the button and you will find that the output is undefined****

2. How to bind

In order to solve the above problem of correct output this, common binding methods are:

• Use bind in render method
• Use pointed function in render method
• bind in constructor
• Definition stages using arrow functions to bind

2.1 Use bind in render method

If you use a class component, where an element/component is given an onClick property, it now and will custom bind its this to the current component. The solution to this problem is to bind this to the current component using .bind(this) after the function

class App extends {
    handleClick(){
        (this)
    }
    render(){
        return <div onClick={(this)}>test</div>
    }
}

This rendering method will re-bind operations every time it renders, affecting performance

2.2 Use arrow function in render method

This pointer is bound to the current component through the context of ES6, and a new method will be generated every time the render is rendered, which will affect performance

class App extends {
    handleClick(){
        (this)
    }
    render(){
        return <div onClick={e=>(e)}>test</div>
    }
}

2.3 bind in constructor

Prebinding binds the current component in the constructor, which can avoid repeated binding in the render operation

class App extends {
    constructor(props){
      super(props);
      =(this);
    }
    handleClick(){
        (this)
    }
    render(){
        return <div onClick={(this)}>test</div>
    }
}

2.4 Definition stage using arrow function binding (optimal)

Like the above three methods, it can avoid repeated binding in render operation, and the implementation is also very simple, as follows:

class App extends {
    constructor(props){
      super(props)
    }
    handleClick=()=>{
        (this)
    }
    render(){
        return <div onClick={}>test</div>
    }
}

3. Difference

The above four methods are the following differences:

Writing method: The method one way two way are simple, but the writing method three way three is too complicated
Performance: Method 1 and Method 2 will generate new method instances every time the component renders, and performance problems are lacking. If this function is passed to a child component as a property value, it will cause additional rendering, and the third and fourth methods will only generate one method instance.

To sum up, the fourth method is the optimal event binding method

This is the end of this article about the implementation and differences of React event binding. For more related React event binding content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!