如何避免附加多個事件偵聽器？

Question

以下代碼是要附加多個事件偵聽器還是 React Native / expo-linking 一次只允許附加一個事件偵聽器？

import * as Linking from 'expo-linking'
import { useIsFocused } from '@react-navigation/native'

const MyComponent = () => {
  const isFocused = useIsFocused()

  useEffect(() => {
    fetchData()
    Linking.addEventListener('url', _handleEvent)
  }, [isFocused])

  const fetchData = () => {
    // ...
  }

  const _handleEvent = () => {
    // ...
  }

  return (
    <View><View>
  )
}

有沒有辦法檢查事件偵聽器是否已經存在，以便我可以執行以下操作：

useEffect(() => {
  fetchData()
  if(!eventListenerExists){
    Linking.addEventListener('url', _handleEvent)
  }
}, [isFocused])

Answer 1

它將附加多個處理程序，每次isFocused更改時添加一個。 要在附加下一個處理程序時刪除前一個處理程序，請返回一個 React 將調用的函數：

useEffect(() => {
  fetchData()
  Linking.addEventListener('url', _handleEvent)
  return () => Linking.removeEventListener('url', _handleEvent) // <======
}, [isFocused])

您無論如何都想這樣做，以便在您的組件完全卸載時刪除處理程序。

這在此處的 React 文檔中有所介紹。

Answer 2

我想甚至應該打一次電話

useEffect(() => {
  Linking.addEventListener('url', _handleEvent)
  return () => Linking.removeEventListener('url', _handleEvent) // <======
}, [])

Answer 3

1、在useEffect回調中，返回移除監聽器的函數； 2、每次在綁定之前刪除監聽器。 如：

useEffect(() => {
    window.removeEventListener('url', hander);
    window.addEventListener('url', hander);
    return () => window.removeEventListener('url', hander);
}, [XXX])