React - 作為 onClick 參數的 {doThisFunc}、{doThisFunc()} 和 {()=>doThisFunc()} 有什么區別？

Question

我對 JS 的反應和那種平庸是完全陌生的。 只想知道為按鈕的 onClick 事件提供這些參數有什么區別：

• onClick={doThisFunc}
• onClick={doThisFunc()}
• onClick={() => doThisFunc()}

最近我剛剛遇到了一個錯誤，我用 onClick={doThisFunc(a)} 之類的參數調用 function 並且應用程序出現“重新渲染過多。React 限制了渲染次數以防止無限循環”。 但后來我把它改成了 onClick={() => doThisFunc(a)} 並且它工作得很好。

很抱歉出現這樣的初學者問題，非常感謝您的反饋！

Answer 1

onClick={doThisFunc}

這意味着“將 function 傳遞到 onclick 道具中”。 稍后，當點擊發生時，react 將調用doThisFunc ，傳入點擊事件。 這通常是正確的做法，假設您希望 function 接收點擊事件。

onClick={doThisFunc()}

這意味着“立即調用 function，並將其返回值傳遞給 onclick 屬性”。 這通常是一個錯誤。 只有當doThisFunc是一個創建點擊處理函數的工廠時，您才會這樣做，這很少見。

onClick={() => doThisFunc()}

這意味着“使用文本() => doThisFunc()創建一個新的 function，並將其傳遞給 onClick”。 稍后，當點擊發生時，react 會調用你的新 function，它又會調用 doThisFunc。

這種方法有時只是獲得與選項 1 相同的最終結果的更冗長的方法。但它確實有一個好處，即您可以將任何您想要的值傳遞給 doThisFunc，所以如果您想要傳遞事件以外的其他內容，你會用這個。