props.fun和props.fun（）之間的區別

Question

在reactjs中使用功能組件時，我有一個onClick事件處理程序。

我用以下方式稱呼它：

onClick={ props.function } 

而不是;

onClick={ props.function() }

我得到一個解釋，下面的代碼將不起作用，因為它將立即調用而不是傳遞給它。 我沒有完全明白。 誰能解釋一下？

onClick={ props.function() }

Answer 1

在Javascript中，對象是通過引用復制的。 這意味着，當您執行var a = {}或function a() {} ，將分配一個存儲位置，在該位置將存儲與該變量相關的值。

變量將保存內存位置，而不是實際值。

不調用函數，您需要在函數名稱后添加括號() 。

由於要在click事件上調用此函數，因此必須將引用傳遞給處理程序，以便在觸發事件時調用您的函數。

現在，您甚至可能遇到希望將參數傳遞給該函數進行某些處理的情況。

在這種情況下，您可以執行functionName.bind(context, arguments)

Answer 2

整個想法是事件處理程序應該引用一個函數...當您使用function()您將從該函數返回的內容傳遞給單擊處理程序...這是undefined ...因此稍后觸發單擊將導致調用undefined ，將永遠無法工作

所以可以說我們有

handleClick(){
 console.log("clicked")
}

如果我們使用

onClick={ handleClick() }

當您檢查控制台時，您會發現在組件渲染之后會記錄“單擊”，因此會立即調用它。

但它不會被稱為后onClick因為onClick事件現在已經不是一個函數引用其通過無論是通過函數調用是返回處理的已處理undefined現在

要進一步了解這一點，請考慮以下示例

handleClickWithFunction(){
   return function(){
     console.log("clicked");
   }
}

現在，如果您使用

onClick={ handleClickWithFunction() }

它應該起作用，因為一旦組件呈現了handleClickWithFunction就會執行該函數並返回另一個將console.log("clicked")函數，因此現在該事件由對handleClickWithFunction返回的函數的引用來處理