React JSX 中的 onClick={increase} 和 onClick={()=>{increase()}} 有什么區別？

Question

我搜索了一下，沒有找到任何結果，所以我在這里問。

Answer 1

如果increase function 沒有 arguments，則沒有區別。

唯一不同的方法是，如果定義此道具的組件使用從onClick function 內部返回的值。 例如，對於一般情況：

<Foo fn={fn} />

<Foo fn={() => { fn() }} />

這兩個是不等價的，因為第一個會將fn的返回值返回給 Foo，而第二個會將undefined返回給 Foo。 如果 Foo 使用它的fn屬性的返回值，你會看到不同。

但是對於 React 中的onClick ，返回值無關緊要，並且被忽略 - 所以你最好使用onClick={increase}來節省幾個字符。

如果increase function確實取arguments，那么做

onClick={increase}

將點擊事件傳遞給 function，但是

onClick={() => { increase() }}

不會將任何東西傳遞給 function。

（要使用匿名內聯表單將事件傳遞給 function，您需要onClick={(e) => { increase(e) }} ）

Answer 2

對CertainPerformance的回答的一個補充 - 使用onClick={increase} ，我們可以通過將 function 傳遞給useCallback掛鈎來傳遞回調的記憶版本。

喜歡，

const increase = useCallback(()=>{
   //some logic
},[])
...

<Foo onClick={increase} />

這有助於防止在重新渲染父組件時不必要地渲染組件，從而提高性能。

而在onClick = {()=>{increase()}}的情況下，每次都會重新渲染組件，因為在每次渲染父組件時都會創建對回調的新引用。 此外，我們不能像onClick = {useCallback(()=>{increase()},[])}在這里使用useCallback ，因為不能在回調中調用useCallback 。 我們收到錯誤消息 - React Hook "useCallback" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function. React Hook "useCallback" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

參考：鈎子規則， useCallback

Answer 3

不同之處在於：

onClick={increase}

僅調用“增加”function，您不能通過此方法將參數傳遞給“增加”function，您也只能調用這個ZC1C425268E68385D14AB5074C17Z，但是當您使用：

onClick={()=> {
increase(argument1, argument2,...);
secondFunction();
thirdFunction();
//and so many other functions
}
}

您可以將 arguments 傳遞給您的函數，也可以調用其他函數。