useState 如何在反應中與 eventListener 一起使用

Question

在下面的沙盒項目中，我嘗試使用自定義掛鈎來附加事件偵聽器。

在 useEventListener.js 文件中，如果我將 savedHandler.current 函數直接傳遞給事件偵聽器（第 21 行），我在狀態更新期間不會獲得更新的狀態值。 只有當我在匿名函數中使用 savedHandler.current 函數時（第 19 行），我才能獲得更新的狀態值。

有人可以幫我理解這是如何工作的嗎？ 這是因為這個參考嗎？

https://codesandbox.io/s/gracious-cloud-kjw7dk?file=/src/useEventListener.js

謝謝

Answer 1

這是我能解釋的最好的：

對於上下文，當您單擊切換標志按鈕時，只有您的第一個useEffect(callback,[handler])在每次渲染后運行，而您的第二個useEffect(callback,[eventName,element])在初始渲染后僅運行一次。

1. 現在，當您將savedHandler.current直接傳遞給事件偵聽器時，第 21 行，事件偵聽器會按原樣附加useCallback返回的函數，因此在每個事件上，由於以下原因，都會調用相同的函數：事件僅注冊一次，並且清理函數不會運行，因為useEffect僅在初始渲染后運行一次（清理函數將在實例中運行，就在依賴項更改導致下一個副作用之前以及組件卸載時）。 因此，您只需使用一個在渲染中持續存在的記憶化回調來注冊事件一次。 在第一個useEffect中對savedHandler.current的更新不會更新在第二個useEffect中傳遞給事件偵聽器的回調，因為它不會重新運行，因此不會更新傳遞給事件偵聽器的回調。
2. 現在，當您在匿名函數中使用savedHandler.current函數時，情況就完全不同了。 當您將此類函數作為回調傳遞時，每個事件都會調用一個新函數，這與第一個實例不同。 盡管代碼相同，但第一個事件和第二個事件的匿名回調並不相同。 因此，在這里您不會被之前傳遞的相同事件偵聽器回調所困擾，因此您現在可以訪問由第一個 useEffect 更新的回調函數中最新的 memoized savedHandler.current值，盡管第二個效果沒有再次運行。

就是這個。 要自己確認，請嘗試添加處理程序作為第二個useEffect的依賴項，並將savedHandler.current直接傳遞給事件偵聽器。 您將獲得更新的狀態值，因為useEffect現在在每次更新處理程序后運行，並且事件偵聽器獲取要調用的最新回調。 而不是創建另一個變量，您可以直接執行element.addEventListener(eventName, (event) => savedHandler.current(event));