Javascript 无法理解react.js中的事件处理

我从过去两天开始练习react，当我开始“处理事件”部分时，我无法理解下面的代码。有人能帮我吗

---

默认情况下，有许多事件，对于这些事件，有一个in-React包装本机事件。参考官方文件，深入了解这两类事件

在上面的代码中，当用户单击按钮时，将触发与单击操作（即单击事件）相对应的事件，React将使用语法事件包装本机事件，并调用相应的事件处理程序函数。在上面的代码中，该函数是handleClick（）。在该功能中，您可以执行与按钮上的用户单击操作相对应的逻辑

请注意，默认情况下，语法事件将作为第一个参数传递给handleClick（）函数。因此，您可以按如下方式编写

handleClick(event) {
    console.log(event)
    // your logic
}

---

有很多方法可以用来捕获用户操作并相应地修改应用程序的行为。

这是react方法与事件回调的绑定，因此我们可以在事件回调方法中访问react组件类的

this

。 在react中绑定方法有三种方法

构造函数中的。 绑定函数的最佳方法之一，因为构造函数在整个组件生命周期中只调用一次

class Test {
 constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
 }
 handleClick(e) {
  // Do whatever you want to here
 }
}

使用箭头功能。简单但不推荐，因为它会为每次调用render函数绑定和初始化方法，这会降低性能

<button onClick={(e) => this.handleClick(e)}/>

this.handleClick（e）}/>

将箭头函数定义为类属性

class Test {
 handleClick = (e) => {
  // Do whatever you want to here
 }
 render() {
  return(
   ...
   <button onClick={this.handleClick}/>
  )
 }
}

类测试{
handleClick=（e）=>{
//在这里你想干什么就干什么
}
render（）{
返回(
...
)
}
}

为了获得更好的性能，您可以使用1和3中的任何方法，但尽量避免使用方法2

---

您在代码的哪一部分遇到问题，请详细说明。谢谢！我还有最后一个疑问。我们什么时候真正使用“this”，为什么必须使用？如果你能帮我举个例子，那就太好了！