Interview question-React (4): How to implement event binding in React? How many ways are there?

1. React event binding mechanism

In React, event binding is implemented through JSX syntax. You can bind event handlers directly to element attributes, such as onClick, onMouseOveretc. When the corresponding event is triggered, the bound event handler will be called.

React adopts a synthetic event ( SyntheticEvent) mechanism to encapsulate the underlying browser native events to achieve cross-browser consistency. This mechanism makes event handling behave the same on different browsers and platforms, reducing compatibility issues.

Two, a variety of event binding methods

In React, there are many ways of event binding to choose from, the following are some common ways:

1. Bind the event handler function in the constructor:

This method is suitable for situations where some initialization operations need to be performed in the constructor. Bind the event handler in the constructor and explicitly thisbind to the handler.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

Binding the event handler in the constructor requires additional code, which is a bit cumbersome, but it is an officially recommended way.

2. Explicitly bind at call time:

When the event handler is called, it is explicitly bound through bind this.

class MyComponent extends React.Component {
  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return <button onClick={this.handleClick.bind(this)}>Click me</button>;
  }
}

New functions are created every time you render, which can affect performance.

3. Use arrow functions:

The nature of arrow functions makes it possible to automatically bind the current context without additional binding steps. This method is more concise and avoids thisthe trouble of manual binding.

class MyComponent extends React.Component {
  handleClick = () => {
    console.log('Button clicked');
  };

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

The syntax is concise, and the current context is automatically bound without additional binding steps.

4. Pass in an arrow function directly (recommended):

In the trigger event, directly pass in an arrow function such as the following code, which can also be automatically bound thisto make the code clearer. Another advantage of this method is that it is very convenient to pass parameters.

class MyComponent extends React.Component {
  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return <button onClick={() => this.handleClick()}>Click me</button>;
  }
}

Arrow function passing parameters

class MyComponent extends React.Component {
  handleClick(name, age) {
    console.log("name is ",name," age is ",age);//name is jack, age is 18
  }

  render() {
    return <button onClick={() => this.handleClick("jack", 18)}>Click me</button>;
  }
}

It is more convenient when passing parameters, and any parameters can be passed inside the arrow function.