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

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])

Answer 4

对于新 API：

useEffect(() => {
  fetchData()
  const subscription = Linking.addEventListener('url', _handleEvent)
  return () => subscription.remove(); // <======
}, [])