Javascript 注销时是否有必要分离所有Firestore侦听器？ 介绍

我的应用程序的不同屏幕上有多个侦听器。注销是在我的配置文件屏幕的子组件中实现的，因为我没有使用redux，所以我必须将每个侦听器（实际上我将所有侦听器都存储在父组件的ref上）传递给它，以便在注销之前将它们分离

问题: 这真的不容易处理，因为我必须将多个侦听器作为道具从子对象传递给一个公共父对象，然后传递给注销组件。。。长时间浏览组件树

真的有必要在注销之前分离所有Firebase侦听器吗？如果没有（bug或其他东西…），会发生什么

Pd：我正在使用该模式进行导航

代码 注销组件

配置文件屏幕组件（注销组件的直接父级）

。。。
const{attachListener，detachListeners}=props；
// ... 附加新firestore侦听器的代码
// ... 东西
返回(
...
) 

公共父级（包含对所有侦听器的引用）

。。。
const listeners=useRef（[]）.current；
const attachListener=（listener）=>listeners.push（listener）；
const dettachListeners=（）=>listeners.forEach（listener=>listener（））；
useffect（（）=>{
//清理
return（）=>{
分离侦听器（）；
}
}, []);
返回(
)

真的有必要在注销之前分离所有Firebase侦听器吗

这完全取决于你的具体情况

如果没有（bug或其他东西…），会发生什么

您可能会泄漏一个侦听器，该侦听器在更新有用后很长一段时间内继续接收更新。这将浪费金钱和带宽。如果您想避免浪费，请在所有侦听器在应用程序中变得无用之前将其删除

const SignOut = withFirebase(function SignOut(props) {
   // ... stuff
   const signOut = () => {
    const { firebase, onSignOut } = props;

    // Do the neccessary stuff before signing out
    onSignOut();

    // Change the authentication state
    firebase.signOut();
  };
  // ... stuff
};

...
const {attachListener, detachListeners} = props;

// ... code attaching a new firestore listener
// ... stuff

return (
   ...
   <SignOut detachListeners={detachListeners} />
) 

 ...
 const listeners = useRef([]).current;

 const attachListener = (listener) => listeners.push(listener);

 const dettachListeners = () => listeners.forEach(listener => listener());


 useEffect(() => {
    // cleanup
    return () => { 
       detachListeners(); 
    }
 }, []);


 return (
     <>
        <Profile attachListener={attachListener} detachListener={detachListener} />
        <OtherComponentWithListeners1 attachListener={attachListener} />
        <OtherComponentWithListeners2 attachListener={attachListener} />
     </>
 )