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

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])无论如何你都想这样做，以便在你的组件完全卸载时删除处理程序。

Answer 2

我想甚至应该打电话一次useEffect(() => {&nbsp; Linking.addEventListener('url', _handleEvent)&nbsp; return () => Linking.removeEventListener('url', _handleEvent) // <======}, [])

Answer 3

1、在useEffect回调中，返回移除监听的函数；2、每次在绑定之前移除监听器。例如：useEffect(() => {&nbsp; &nbsp; window.removeEventListener('url', hander);&nbsp; &nbsp; window.addEventListener('url', hander);&nbsp; &nbsp; return () => window.removeEventListener('url', hander);}, [XXX])