f（）和（）=> f（）之间的区别

Question

当我用ReactJS在javascript中进行事件处理时，我对此感到困惑。

之间是否有任何区别

<button onClick={f()} />

和

<button onClick={()=>f()} />

我知道的第二个是返回f（）的包装函数，但是我看不到那里到底发生了什么变化。而且我确实在其他人的代码中看到了它们。

Answer 1

在您的示例中，第一种情况只是在加载时调用f，除非f返回另一个函数（在发生click事件时会调用），否则可能不是您想要的。第二个只是包裹f的匿名函数，因此f事件发生之前不会调用click。

为什么第二个符号有用？

如果f不接受任何参数，则使用

<button onClick={ f } /> // note: no parentheses

和

<button onClick={ () => f() } />

差不多。两者之间略有不同，因为在第一种情况下event被传递给f而在第二种情况下没有。从技术上讲，<button onClick={ event => f(event) }/>相当于第一种情况，但这有点不重要。

但是，如果f确实接受了一些参数（event本身除外），那么使用它会很有用：

<button onClick={ () => f(someValue) } />

以便在发生点击事件时可以将someValue传递给f。

Answer 2

这两个之间的区别是第一个

onClick={f()} 

表示f函数的返回值将在onClick事件上执行。

第二个示例

onClick={() => f()}

将在onClick事件上自行执行功能f。

Answer 3

该问题并非特定于React和onClick。它适用于JavaScript中可能需要或不需要功能的任何情况。

它们之间的区别在于，一个是函数，而另一个可能不是函数。

如果f()的结果不是一个函数，并且期望该函数，则这是一个错误，例如在onClick={f()}中。

() => f()是一个函数。如果在不期望使用函数的地方使用它，那将是一个错误，例如(() => f()) + 1