javascript - 给定 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)}时，此函数似乎可以与其参数一起正常工作。但是如果您更改处理程序内的状态，那么您就会知道巨大的差异。您将收到错误最大更新深度超出 react 。

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

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