Javascript React Click事件处理最佳实践

在学习React时，我看到人们处理事件的方式不同。处理点击事件的最佳实践是什么

这条路好吗？是否将事件添加到要使用此函数调用的类对象

import React from "react";

class Foo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    handleClick = handleClick.bind(this)
  }

  handleClick(){
    //Do some stuff
  }

  render(){

    return(
      <div onClick={this.handleClick}>
        Foo
      </div>)
  }
}

export default Foo;

从“React”导入React；
类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
handleClick=handleClick.bind（此）
}
handleClick（）{
//做点什么
}
render（）{
返回(
福
)
}
}
导出默认Foo；

还是这边？在呈现“部分”中声明函数

从“React”导入React；
类栏扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
常量handleClick=（）=>{
//做点什么
}
返回(
酒吧
)
}
}
导出默认栏；

有更好的办法吗？

---

哪种编码模式最好？

我没有看到您提到的第二种方式，也不建议这样做，因为它将为每个渲染创建一个新函数

我是这样做的：

类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
handleClick=（）=>{
//做点什么
}
render（）{
返回(
福
)
}
}
导出默认Foo我没有看到您提到的第二种方法，也不建议这样做，因为它将为每个渲染创建一个新函数

我是这样做的：


类Foo扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
handleClick=（）=>{
//做点什么
}
render（）{
返回(
福
)
}
}
导出默认Foo官方文件使用：

但我认为，最好也使用以下方法：
从“React”导入React

类栏扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
handleClick=（）=>{
//做点什么
}
render（）{
返回(
酒吧
)
}
}
导出默认栏；

对于第二种方法，您不必关心使用官方文档使用的
.bind（）
：

但我认为，最好也使用以下方法：
从“React”导入React

类栏扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={}；
}
handleClick=（）=>{
//做点什么
}
render（）{
返回(
酒吧
)
}
}
导出默认栏；

对于第二种方法，您不在乎使用
.bind（）
您的第一种方法，即使用您在构造函数中绑定的原型函数，除了缺少此
之外，它是很好的：

this.handleClick = this.handleClick.bind(this);

第二种方法是在
render
内部的每个渲染上创建一个新函数。这使得模拟
handleClick
进行测试变得困难

您经常看到的第三种方法是在构造时创建arrow函数，可以是在构造函数中：

this.handleClick = event => {
    // ...
};

或使用属性声明：

class Bar extends React.Component {
    handleClick = event => {
        // ...
    };
}

它们都有相同的模拟/可测试性问题

除此之外，它们很好。
您的第一种方法是使用您在构造函数中绑定的原型函数，除了您缺少此
：

this.handleClick = this.handleClick.bind(this);

第二种方法是在
render
内部的每个渲染上创建一个新函数。这使得模拟
handleClick
进行测试变得困难

您经常看到的第三种方法是在构造时创建arrow函数，可以是在构造函数中：

this.handleClick = event => {
    // ...
};

或使用属性声明：

class Bar extends React.Component {
    handleClick = event => {
        // ...
    };
}

它们都有相同的模拟/可测试性问题

除此之外，它们很好。
许多代码在每次渲染时都会创建新函数。曾经使用过
{someArray.map（entry=>（
entry.text
）}
？：-）第二种方法的真正问题是可测试性。很多代码在每次渲染时都会创建新函数。曾经使用过
{someArray.map（entry=>（
entry.text
）}
？：-）第二种方法的真正问题是可测试性。