给定 React 组件中的两次按钮单击有什么区别？

Question

给定组件中的按钮单击事件之间有什么区别吗？哪种写作方式是首选？

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>
    );
  }
}

Answer 1

当您不需要传递参数时，您可以使用

{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)}，这个函数似乎可以很好地使用它的参数。但是如果您更改处理程序内部的状态，那么您就会知道其中的巨大差异。您会收到错误最大更新深度超出反应。

但是同样，您可以避免该错误并避免性能问题，您需要像我之前使用箭头函数所说的那样定义方法：

doSomething = (param) => () => {