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

【问题标题】：What's the difference between onClick ={ () => function()} and onClick = {function()}?onClick ={ () => function()} 和 onClick = {function()} 有什么区别？
【发布时间】：2022-04-21 17:08:55
【问题描述】：

这段代码有什么区别：

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

和

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

区别在于第一个有括号，而第二个没有。如果没有括号，我的应用程序似乎会无限期地重新渲染。谁能给我解释一下？

【问题讨论】：

不同的是首先它不是执行函数，而是调用函数。其次，它只在那里执行功能。
在onClick 你不应该调用这个函数，而是设置一个函数引用。在第一种情况下，您在onClick 中编写另一个函数，它返回一个函数引用，而第二种情况您直接调用该函数。这意味着您的 submitHandler 函数在单击按钮之前执行。它不等待点击事件。
一个onClick事件处理函数是一个函数，所以prop期待一个函数，所以除非props.submitHandler(searchInputValue)返回一个函数，否则第二行代码无效。
第一个例子是调用函数，第二个例子是执行。根据您在提交处理程序中所做的事情，这可能会导致无限期重新渲染。

标签： javascript reactjs react-hooks

【解决方案1】：

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

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

【讨论】：

所以你的意思是即使函数被包裹在 onClick 事件中，它仍然会执行？
分配给onClick的函数在点击事件被触发时被调用。

【解决方案2】：

第一个：

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

这是箭头函数，它只会触发按钮的onClick。

第二个：

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

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

【讨论】：

【解决方案3】：

请记住，通过 {} 将函数分配给 onClick 并不意味着它将在 html 用户请求时触发。 {} 是编译时操作。

另外一句话： onClick=> {在编译时执行这里的内容并将结果分配给onClick action}

如果您在 {} 中有一个 props.submitHandler() 函数调用，它将被执行并返回分配给 onClick 的值。

如果您有一个()=>props.submitHandler，它是一个箭头函数，它的执行将“绑定”到 onClick 用户操作。做它的传统方法（不使用花哨的箭头函数）是

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

【讨论】：