This is already pretty flexible in javascript, but putting it in React gives us a more confusing choice. Let’s take a look at the five binding methods that React This provides.

1. Use the React. CreateClass

If you’re using React 15 or later, you might have used the React. CreateClass function to create a component. The this of all functions you create in it will be automatically bound to the component.

const App = React.createClass({
  handleClick() {
    console.log('this > '.this); // This points to the App component itself
  },
  render() {
    return (
      <div onClick={this.handleClick}>test</div>); }});Copy the code

However, it should be noted that with the release of React 16, the change method has been officially removed from React

2. Use bind in the render method

If you create a component using react.componentand give a component/element an onClick property, it will now bind its this to the current component by itself. The way to fix this 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>)}}Copy the code

This approach is simple, and is probably the approach most beginner developers take when they run into a problem. This will then affect performance since the component will reassign functions each time it executes Render. It can ruin PureComponent performance, especially if you do some performance tuning. Not recommended

Use the arrow function in the render method

This approach uses ES6’s context binding to make this point to the current component, but it has the same performance issues as the second approach and is not recommended

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

Here’s a way to avoid these hassles without too much extra hassle.

4. Bind in constructor

To avoid possible performance problems with binding this in Render, we can pre-bind it in Constructor.

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>)}}Copy the code

However, this approach obviously doesn’t have the readability and maintainability advantages of the second and third approaches, but the second and third approaches are not recommended due to potential performance issues, so the arrow function binding provided by ECMA Stage-2 is now recommended.

5. Use the arrow function binding during the definition phase

To use this function, you need to enable stage-2 in. Babelrc. The binding method is as follows:

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

There are many optimizations for this approach:

  • The arrow function is automatically bound to the current component’s scope and is not changed by a call

  • It avoids the potential performance problems of types 2 and 3

  • It avoids a lot of duplication of code in the fourth binding

Conclusion:

If you’re using VERSIONS above ES6 and React 16, the best practice is to use method 5 to bind this

References:

  • React.js Pure render performance rendering antipattern

  • This binds the decorator

Thank you for reading, like can pay attention to one ha