Javascript 在带有setState的React类组件中使用箭头函数的最佳实践

我试图理解在React类组件中使用箭头函数和设置状态的两种方法之间的区别。两者似乎都能正常工作，并能正确设置状态

在受控组件中，我像这样调用有问题的函数

我看到这些函数定义的两种方式如下：

方法1。

handleChange = (e) => this.setState({ name: e.target.value});

方法2

handleChange = (e) => {
  this.setState({ name: e.target.value });
};

我的问题是:

一个优先于另一个，为什么

与只执行其内容的方法2相比，方法1不是从函数返回值吗

下面是受控输入的工作代码片段

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={name:'}
}
handleChange=（e）=>this.setState（{name:e.target.value}）；
handleChange2=（e）=>{
this.setState（{name:e.target.value}）；
};
render（）{
返回(
{this.state.name | |'还没有名字'}

);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）
方法1简洁易读。它不返回任何内容。请注意，此方法不需要
e
周围的括号

方法2是首选方法，以防在文本更改时，除了状态更改（
setState（）
）之外，您还需要执行更多操作。例如，您想调用另一个函数，或者只是想以某种方式验证输入。此外，如果添加return语句，则可以返回值

handleChange = (e) => this.setState({ name: e.target.value});

是同一件事吗

handleChange = e => {
    return this.setState({ name: e.target.value});
};

没有函数体
{}
的arrow函数也将隐式返回单个语句，如您所说。如果您不想要返回值，您仍然可以在不使用函数体的情况下编写它，只要忽略返回值，如果您发现这种编写方法更好的话。这只是口味的问题。它们实际上是一样的，因为它们都将返回未定义的
。setState不返回值，第二个不提供返回值。它们是相同的东西，第一个隐式返回。选项1中的
（e）
周围也不需要括号，因为它是单个argument@GhostCat，不用担心。这确实是有帮助的，也是有道理的。我将再次阅读您在评论中发布的分类帖子。因为这提供了更多关于我错在哪里的背景。我很欣赏快速而友好的复出！