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

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(() => {

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