如何避免附加多个事件监听器？答案

【问题标题】：How to avoid multiple event listeners from being attached?如何避免附加多个事件监听器？
【发布时间】：2020-10-03 12:58:19
【问题描述】：

以下代码是要附加多个事件侦听器还是 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])

【问题讨论】：

标签： javascript react-native expo react-navigation

【解决方案1】：

它将附加多个处理程序，每次isFocused 更改时添加一个。要在附加下一个处理程序时删除上一个处理程序，请返回一个 React 将调用的函数：

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

您希望无论如何这样做，以便在您的组件完全卸载时删除处理程序。

这在 React 文档here 中有介绍。

【讨论】：

正是我要找的，谢谢

【解决方案2】：

我觉得应该打一次电话

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

【讨论】：

当isFocused 值发生变化时，我仍然需要调用fetchData()。这并不能解决问题

【解决方案3】：

1、在useEffect回调中，返回移除监听的函数； 2、每次绑定前先移除监听器。如：

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

【讨论】：