给定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

首先，我们将看看何时使用两者：

>

on点击={this.do某物}：这是直接使用类变量，但是当我们需要向函数传递参数时，不能使用它。为此，第二种方法是拯救。传递参数的方法是：

this.do的omething.bind

onClick={（）=

onClick={（）=

另外，需要注意的一点是，当组件重新渲染时，每次都会为第二个组件分配内存，而第一个组件只使用内存引用。因此，如果不必在函数中传递参数，第一个更好。

Answer 2

来自博士

<Button onClick={() => this.doSomething()} title="Test" />

此语法的问题在于每次呈现按钮时都会创建不同的回调。在大多数情况下，这很好。但是，如果此回调作为道具传递给较低的组件，则这些组件可能会执行额外的重新渲染。

<Button onClick={this.doSomething} title="Test" /> 

我们通常建议在构造函数中绑定或使用类字段语法，以避免这种性能问题。

Answer 3

不需要传递参数时，只需使用

{this.doSomething}

但是，如果需要将参数传递给函数，则这将导致方法立即执行：

{this.doSomething(param)}

因此，为了不立即执行该函数，我们需要像您使用的那样使用arrow方法：

{() => this.doSomething(param)}

因此，在你的情况下，两者都是一样的。因为它们只在调用onClark时执行，即。你点击元素。

奖金：

即使你想传递参数，你仍然可以使用第一种方式：

{this.doSomething(param)}

但为此，您需要如下定义您的方法：

doSomething = (param) => () => {
  console.log('Hi');
}

此外，如果您希望使用事件对象，那么您可以使用如下所示：

doSomething = (param) => (event) => {
  console.log('Hi');
}

或者，使用第二种方法，即。使用箭头函数：

{(event)=>this.doSomething(event,param)}

显然，如果您担心性能，我建议不要使用内联箭头函数。首选的使用方式：

doSomething = (param1, param2,) => (event) => {

误解：

有些人可能会发现，不使用内联箭头函数传递参数的方法也可以工作。但这是不正确的。让我澄清一下。

当您使用{this.do某物（参数）}时，此函数似乎可以很好地使用其参数。但是如果您更改了处理程序中的状态，那么您就会知道其中的巨大差异。你会得到错误的最大更新深度超过反应。

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

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