How to use functions in react class components?

I know how you felt when you first saw this title, trust me, i know what were you thinking?

Are you joking? Use function?

That's too easy, right? const addition= () => {}
And then use it, just make it?

But, but, for beginners, I believe there will be some problems that you will meet

Now,there is a requirement. Every time the number is clicked, the number will increase by 1.

Bad use case ❌

1.The addNum will not take effect, and also has this error message

import React, { PureComponent } from "react";

export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      // Use addNum method directly 
      <div onClick={this.addNum}>
        <div>add</div>
        <div>{this.state.num}</div>
      </div>
    );
  }
}

2.The page will crash when use this method

import React, { PureComponent } from "react";
export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      // Use addNum method directly 
      <div onClick={this.addNum()}>
        <div>add</div>
        <div>{this.state.num}</div>
      </div>
    );
  }
}

Good use case ✔

1.Use arrow function calls

import React, { PureComponent } from "react";

export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      <div
        onClick={() => {
          this.addNum();
        }}
      >
        <div>add</div>
        <div>{this.state.num}</div>
      </div>
    );
  }
}

2.Declare addNum method using arrow function

import React, { PureComponent } from "react";
export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
  }

  addNum = () => {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  };

  render() {
    return (
      <div onClick={this.addNum}>
        <div>add</div>
        <div>{this.state.num}</div>
      </div>
    );
  }
}

3.Bind this

import React, { PureComponent } from "react";
export default class Demo extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      num: 0,
    };
    this.addNum = this.addNum.bind(this);
  }

  addNum() {
    const { num } = this.state;
    this.setState({
      num: num + 1,
    });
  }

  render() {
    return (
      <div onClick={this.addNum}>
        <div>add</div>
        <div>{this.state.num}</div>
      </div>
    );
  }
}

Or you can upgrade react version to 16.8, then use hooks 😂
Because we need to consider this pointer problem in class component, i hate this，that is a devil!!!!!

Then you never need to consider this when you use hooks function component ❤