Comparison of several methods of event binding in React learning

Preface

This article mainly introduces you to the comparison of several methods of React event binding. I will share it for your reference and learning. I won’t say much below. Let’s take a look at the detailed introduction together.

React event binding

Since the class method will not bind this by default, if you forget to bind it when calling, the value of this will be undefined.

Usually, if it is not called directly, this should be bound to the method. There are several binding methods:

1. Use bind to bind this in the constructor

class Button extends  {
constructor(props) {
 super(props);
  = (this);
 }
 handleClick(){
 ('this is:', this);
 }
 render() {
 return (
  <button onClick={}>
  Click me
  </button>
 );
 }
}

2. Use bind to bind this when calling

class Button extends  {
 handleClick(){
 ('this is:', this);
 }
 render() {
 return (
  <button onClick={(this)}>
  Click me
  </button>
 );
 }
}

3. Use arrow functions to bind this when calling

class Button extends  {
 handleClick(){
 ('this is:', this);
 }
 render() {
 return (
  <button onClick={()=>()}>
  Click me
  </button>
 );
 }
}

4. Use the attribute initializer syntax to bind this (experimental)

class Button extends  {
 handleClick=()=>{
 ('this is:', this);
 }
 render() {
 return (
  <button onClick={}>
  Click me
  </button>
 );
 }
}

Compare

Method 2 and Method 3 are both bound to this when called.

• Advantages: The writing method is relatively simple. When there is no state in the component, you do not need to add a class constructor to bind this
• Disadvantages: A new method instance is generated every time it is called, which has an impact on performance. When this function is passed into a low-order component as a property value, these components may be re-rendered additionally, because each time a new method instance is passed as a new property.

Method 1 binds this in the class constructor, and does not need to be bound again when calling.

• Advantages: Only one method instance will be generated, and if this method is used multiple times after binding, there is no need to bind again.
• Disadvantages: Even if you don’t use state, you need to add a class constructor to bind this, with a little more code. . .

Method 4: Use the property initialization syntax to initialize the method into an arrow function, so this is bound when creating the function.

• Advantages: This is bound to the creation method, and it does not need to be bound in the class constructor, and it does not need to be bound when calling. Combined with the advantages of Method 1, Method 2 and Method 3
• Disadvantages: It is still an experimental grammar and needs to be translated using babel

Summarize

Method 1 is the official recommended binding method and the best performance method. Methods 2 and 3 have performance impacts and can cause re-rendering problems when the method is passed as an attribute to the child component. Method 4 is currently an experimental syntax, but it is the best binding method, and it needs to be translated in combination with Bable.

Okay, the above is the entire content of this article. I hope the content of this article will be of some help to everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.