onClick ={ () => function()} 和 onClick = {function()} 有什么区别？

Question

这段代码有什么区别：

<button onClick={()=>props.submitHandler(searchInputValue)}>Submit</button>

和

<button onClick={props.submitHandler(searchInputValue)}>Submit</button>

区别在于第一个有括号，第二个没有。没有括号，我的应用程序似乎无限期地重新渲染。有人可以向我解释一下吗？

Answer 1

在第一个中：

<button onClick={()=>props.submitHandler(searchInputValue)}>Submit</button>

这是箭头函数，只会在按钮单击时触发。

在第二个中：

<button onClick={props.submitHandler(searchInputValue)}>Submit</button>

这是一个普通的函数调用，它在组件渲染发生后立即调用该方法。

Answer 2

第一个创建一个函数，该函数调用submitHandler一个参数并将该函数分配给onClick。

第二个立即（即在渲染步骤期间）submitHandler使用参数调用并将返回值分配给onClick。