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 ❤
Top comments (0)