如何避免多个事件侦听器被附加？

Question

下面的代码是要附加多个事件侦听器，还是一次只允许附加一个事件侦听器？

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更改时都添加一个处理程序。若要在附加下一个处理程序时删除前一个处理程序，请返回一个响应函数，该函数将调用：

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

在useEffect回调中，返回删除侦听器的函数；每次绑定侦听器之前，返回2、。例如：

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