通常我们会在类里面使用
class App extends React.Component {
constructor() {
super();
this.state = {
n: 0
};
}
addN(){
this.setState({
n: this.state.n + 1
});
};
render() {
return (
<div className="App">
<button onClick={()=>this.addN()}>+1</button>
{this.state.n}
</div>
);
}
}
来绑定事件addN，但是这样写太麻烦了，经过es6的升级后可以这样写
class App extends React.Component {
constructor() {
super();
this.state = {
n: 0
};
}
addN = () => {
this.setState({
n: this.state.n + 1
});
};
render() {
return (
<div className="App">
<button onClick={this.addN}>+1</button>
{this.state.n}
</div>
);
}
}
把addN变成一个箭头函数去使用，使得其的this不会因为onClick改变
当我们点击button的时候，实际上是进行了一个button.onClick.call(null,event)的操作，但是由于我们把addN变成了一个箭头函数，所以其的this不会被call改变，这在这里是一个好处，所以以后我们就这样写方便多了
