当弹出窗口关闭时，如何删除扩展弹出窗口（React 组件）的侦听器？

Question

我有一个使用 react（遗留代码）构建的扩展，并且我一直在跟踪一个我最终解决的错误，但我无法修复。当扩展的图标（在浏览器栏中）被点击时，一个 reactComponent被创建，并且一个监听器被添加到它的componentDidMount():async componentDidMount(){   ...   // an object from the background is retrieved   let background_object = this.props.getBackgroundObject();   ...   // code including await background_object.doSomething();   ...   // add event (eventemitter3 is used for the event management)   background_object.event.on('onMusic', this.dance);   ...}async dance() {  this.setState({    'music': true,  })}但是，我无法弄清楚如何在Component消失后删除侦听器，例如通过单击浏览器中的其他位置。我以为这componentWillUnmount就是我要找的东西，但它从未被称为：componentWillUnmount(){  // this is never called!!!  background_object.event.removeListener('onDance', this.dance);}问题是，每次我打开（和关闭）扩展弹出窗口时，都会向 中添加一个新事件background_object，因此会dance()多次调用（与打开和关闭弹出窗口一样多）。现在，我使用了once代替on：async componentDidMount(){   ...   // an object from the background is retrieved   let background_object = this.props.getBackgroundObject();   ...   // code including await background_object.doSomething();   ...   // add event (eventemitter3 is used for the event management)   background_object.event.once('onMusic', this.dance);   ...}async dance() { // add the event again in case onMusic is called again background_object.event.once('onMusic', this.dance); this.setState({   'music': true, })}这样，至少，它只被调用了一次。但是，我担心我的组件被多次创建并消耗浏览器中的内存。我如何确保组件实际上正在被销毁？如何检测弹出窗口何时关闭以删除事件？

Answer 1

可以为此使用chrome.runtime.onConnect（感谢@wOxxOm）：

在 React 组件的构造函数中打开一个连接：

  constructor(props){

    super(props)

    this.state = {

      dance: false,

    }

    ...

    var port = this.xbrowser.runtime.connect();

    ...

  }

componentDidMount在反应组件中添加事件。

async componentDidMount(){

   ...

   // an object from the background is retrieved

   let background_object = this.props.getBackgroundObject();

   ...

   // add event (eventemitter3 is used for the event management)

   background_object.event.on('onMusic', this.dance);

   ...

}

async dance() {

  this.setState({

    'music': true,

  })

}

在后台的某个地方（例如background.js）侦听与浏览器的连接，并在连接丢失时删除该事件：

chrome.runtime.onConnect.addListener(function (externalPort) {

  externalPort.onDisconnect.addListener(function () {

     let background_object = this.props.getBackgroundObject();

     background_object.event.removeListener('onSend'); 

  })

})

在我看来，这不是很优雅，但它确实有效。