多应用共享Redux Store引发内存泄漏，如何窗口关闭时解除引用？

核心原因是Settings窗口关闭时，React组件树仍持有对Background窗口中store的订阅与引用，导致浏览器无法回收已关闭窗口的相关资源，触发内存泄漏提示。以下是具体解决步骤：

1. 监听窗口关闭事件 #

在Settings应用的根组件中，监听beforeunload事件（该事件在窗口即将关闭时触发，此时组件尚未卸载，适合执行清理操作）。

2. 解除Redux Store的订阅与引用 #

React-Redux的Provider本质是让组件树订阅store变化，需主动清理这些订阅并移除引用：

方式一：函数组件配合useStore钩子 #

import { useStore, useEffect } from 'react-redux';

function SettingsRoot() {
  const store = useStore();
  let unsubscribe = null;

  useEffect(() => {
    // 获取store的取消订阅函数
    unsubscribe = store.subscribe(() => {});

    const handleBeforeUnload = () => {
      // 取消所有store订阅
      unsubscribe?.();
      // 清除对Background store的全局引用
      if (window.backgroundStore) {
        window.backgroundStore = null;
      }
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    // 组件卸载时也执行清理
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
      unsubscribe?.();
    };
  }, [store]);

  return <div>{/* Settings组件内容 */}</div>;
}

方式二：自定义带清理逻辑的Provider（类组件/通用场景） #

import { Provider as ReduxProvider } from 'react-redux';
import React, { Component } from 'react';

class CleanupProvider extends Component {
  componentDidMount() {
    // 注册空订阅以获取取消方法
    this.unsubscribe = this.props.store.subscribe(() => {});
    this.handleBeforeUnload = () => {
      this.unsubscribe?.();
      // 清除全局store引用
      if (window.backgroundStore) {
        window.backgroundStore = null;
      }
    };
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  }

  componentWillUnmount() {
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
    this.unsubscribe?.();
  }

  render() {
    return <ReduxProvider store={this.props.store}>{this.props.children}</ReduxProvider>;
  }
}

// 使用时替换原Provider
function SettingsApp() {
  const backgroundStore = getBackgroundWindowHTMLObject().myStore;
  return (
    <CleanupProvider store={backgroundStore}>
      {/* 应用组件内容 */}
    </CleanupProvider>
  );
}

3. 额外注意事项 #

• useSelector、connect等React-Redux API创建的订阅，都会依赖store的subscribe方法，取消根订阅会连带清理这些子订阅。
• 若代码中存在直接持有store的变量，需在窗口关闭时将其置为null，避免残留引用。
• 可通过Chrome开发者工具的Memory面板，对比窗口关闭前后的内存快照，验证泄漏是否解决。

内容的提问来源于stack exchange，提问作者Nicolas K.