函数组件如何绑定事件

在函数组件里，如果要给一个标签绑定事件，不需要this，直接写事件就可以

<button onClick={() => setN(n + 1)}>n+1</button>

绑定一个点击事件，事件名要用{}包起来。即，统一写法：onClick={}

里边是一个箭头函数，调用setN

类组件如何绑定事件

现在的最终最简便的写法：

class Son extends React.Component{
    addN = () => this.setState({n: this.state.n + 1});
    render(){
        return <button onClick={this.addN}>n+1</button>
    }
}

直接在这个class下边声明一个箭头函数，事件处理函数的名字是addN，它是一个箭头函数。

在标签里就直接onClick={this.addN}。因为写在class下边的addN等价于写在constructor(){}里的this.addN=()=>{} 那么这个addN是绑定在这个类的实例上的。

复习一下this：

在一个class里，如果定义了普通函数，就是下图红色两个函数，那么这个函数是在类的原型上的，并不在实例本身上。

如果定义的是箭头函数，等价于在constructor构造函数里定义this上的同名函数，这个函数是在实例本身上的。

所以，在原型上的函数是所有实例共享的。而在实例上的函数则是每个实例独有的。

而且，对于普通函数来说，如果函数定义里使用了this，在这个函数没被调用的时候，this是不能确定到底是什么的。因为普通函数的this就是一个参数，通过.call()调用这个函数的时候，给传的this是什么，那这个函数里使用到的this就是什么。所以普通函数里的this是可变的，是根据调用给传的参数决定的。

但是箭头函数是没有this的，在调用一个箭头函数的时候，就算通过.call()显式地传this，指明了this是什么，这个箭头函数也是不接受的。也就是，给传this也没用，他不接受。所以箭头函数里的this是不可变的。那么如果在箭头函数里用到了this，写的时候this是啥，调用的时候this就还是那个东西，不会变。

箭头函数里并没有 this，如果你在箭头函数里看到 this，你直接把它当作箭头函数外面的 this 即可。外面的 this 是什么，箭头函数里面的 this 就还是什么，因为箭头函数本身不支持 this。