Class binding solution

1. What is it#

In a react application, event names are written in camel case format, for example, onclick should be rewritten as onClick.

The simplest event binding is as follows:

class ShowAlert extends React.Component {
  showAlert() {
    console.log("Hi");
  }

  render() {
    return <button onClick={this.showAlert}>show</button>;
  }
}

From the above, it can be seen that the method for event binding needs to be wrapped in {}.

The above code seems to be fine, but when the output code for the handling function is changed to console.log(this), and the button is clicked, the console will output undefined.

2. How to bind#

To solve the problem of correctly outputting this mentioned above, there are several common binding methods:

Using bind in the render method
Using arrow functions in the render method
Using bind in the constructor
Using arrow functions for definition binding

Using bind in the render method#

If you use a class component and give a component/element an onClick attribute, it will not automatically bind its this to the current component. The solution to this problem is to use .bind(this) after the event function to bind this to the current component.

class App extends React.Component {
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick.bind(this)}>test</div>
    )
  }
}

This method will rebind every time the component is rendered, which affects performance.

Using arrow functions in the render method#

By using the context of ES6 to bind the reference of this to the current component, a new method will be generated every time the component is rendered, which affects performance.

class App extends React.Component {
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={e => this.handleClick(e)}>test</div>
    )
  }
}

Binding in the constructor#

Pre-bind the current component in the constructor to avoid repeated binding in the render operation.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    )
  }
}

Definition binding using arrow functions#

Similar to the third method, it can avoid repeated binding in the render operation, and the implementation is very simple, as follows:

class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleClick = () => {
    console.log('this > ', this);
  }
  render() {
    return (
      <div onClick={this.handleClick}>test</div>
    )
  }
}

3. Differences#

The differences between the above four methods are mainly as follows:

Writing: Method 1 and Method 2 are simple to write, while Method 3 is too cumbersome to write.
Performance: Method 1 and Method 2 will generate new method instances every time the component is rendered, which affects performance. If this function is passed as a property value to a child component, it will cause additional rendering. Method 3 and Method 4 only generate one method instance.

In summary, Method 4 is the optimal event binding method.