给定组件中的按钮单击事件之间有什么区别吗？哪种写作方式是首选？
export default class App extends Component {
doSomething = () => {
console.log('Hi');
}
render() {
return (
<Container>
<Button onClick={this.doSomething} title="Test" />
<Button onClick={() => this.doSomething()} title="Test" />
</Container>
);
}
}
当您不需要传递参数时，您可以使用
{this.doSomething}
但是如果您需要将参数传递给函数，那么这将导致您的方法立即执行：
{this.doSomething(param)}
因此，不要立即执行该函数，我们需要像您使用的那样使用箭头方法：
{() => this.doSomething(param)}
因此，在您的情况下，两者都是相同的。因为它们仅在调用 onClick 时执行，即。你点击元素。
奖金：
即使您想传递参数，您仍然可以使用第一种方式：
{this.doSomething(param)}
但是为此，您需要像这样定义您的方法：
doSomething = (param) => () => {
console.log('Hi');
}
此外，如果你想使用事件对象，那么你可以使用如下：
doSomething = (param) => (event) => {
console.log('Hi');
}
或者，使用第二种方法，即。带箭头功能：
{(event)=>this.doSomething(event,param)}
显然，如果您担心性能，我建议不要使用内联箭头函数。首选使用方式：
doSomething = (param1, param2,) => (event) => {
误解：
有些人可能会发现不使用内联箭头函数传递参数的方法也可以。但这是不正确的。让我澄清一下。
当您使用 时{this.doSomething(param)}，这个函数似乎可以很好地使用它的参数。但是，如果您更改处理程序内部的状态，那么您就会知道其中的巨大差异。您会收到错误最大更新深度超出react。
但是同样，您可以避免该错误并避免性能问题，您需要像我之前所说的那样使用箭头函数定义方法：
doSomething = (param) => () => {
来自文档
<Button onClick={() => this.doSomething()} title="Test" />
这种语法的问题在于每次
Button渲染时都会创建一个不同的回调。在大多数情况下，这很好。但是，如果此回调作为props传递给较低的组件，则这些组件可能会进行额外的重新渲染。
<Button onClick={this.doSomething} title="Test" />
我们通常建议在构造函数中绑定或使用类字段语法，以避免此类性能问题。
首先，我们将看看何时使用两者：
onClick={this.doSomething}: 这个是直接使用类变量，但是当我们需要给函数传递参数的时候就不能用了。为此，第二种方法来拯救。向 this 传递参数的一种方法是：
onClick={this.doSomething.bind(params, this)}
onClick={() => this.doSomething()}：您可以将参数传递给函数
onClick={() => this.doSomething(param1, param2)}.
还有一点要注意，当组件重新渲染时，每次都会为第二个分配内存，而第一个只使用内存引用。因此，如果您不必在函数中传递参数，则第一个会更好。