f()和()=> f()之间的区别

Question

在使用ReactJS在javascript中进行事件处理时,我对此感到困惑.

之间有什么区别吗？

<button onClick={f()} />

和

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

我所知道的是第二个是返回f()的包装函数,但我看不出那里究竟发生了什么变化.我确实在别人的代码中看到了这两个.

Answer 1

在您的示例中,第一种情况只是f在加载时调用,这可能不是您想要的,除非f返回另一个函数(在发生单击事件时将调用).第二个只是一个匿名函数换行,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在click事件发生时传递给它.