为 window.onstorage 移除事件监听器？答案

【问题标题】：removeEventListener for window.onstorage?为 window.onstorage 移除事件监听器？
【发布时间】：2021-03-24 04:53:09
【问题描述】：

MDN docs 描述了两种可能的监听存储事件的方法，window.addEventListener('storage', () => { ... }) 和 window.onstorage = () => { ... }。在 React 应用程序中，如果我在 useEffect 挂钩中使用 addEventListener，我想返回清理函数 window.removeEventListener('storage', ... ) 以避免组件卸载后的内存泄漏。

但是，window.onstorage = () => { ... } 不提供删除事件侦听器的方法。这是否意味着以这种方式监听存储事件而不在 useEffect 挂钩中返回清理函数是安全的？

【问题讨论】：

标签： reactjs local-storage addeventlistener use-effect removeeventlistener

【解决方案1】：

当你添加一个像这样的监听器时

window.onstorage = () => { ... }

从技术上讲，您的应用程序在存储中只能有一个侦听器。但是，如果 window.addEventListener 您可以拥有任意数量的事件侦听器，并且清理需要传递给 addEventListener 的相同函数引用以传递给 removeEventListener

你可以通过将存储监听函数设置为null来清理它

useEffect(() => {
    // other code
    return () => { window.onstorage = null };
}, []);

【讨论】：