electron 窗口 close 事件在 render react 中执行两次。

[Mesimpler]

我为主窗口添加了close事件，当其触发时向渲染进程发送quit消息以触发渲染进程中的函数

mainWindow.on('close', (event) => {
    event.preventDefault()
    console.log('send app quit msg')
    mainWindow.webContents.send('app-quit')
    console.log('app quit msg sended')
  })

在preload.js中转发

const api = {
  onAppQuit: (cb) => ipcRenderer.on('app-quit', cb)
}

renderer中的监听函数

function App() {
  window.api.onAppQuit(() => {
    console.log('app quiting...')
  })

  return <h1>Some Here</h1>
}

export default App

结果onAppQuit被执行了两次
vsc terminal:

send app quit msg
app quit msg sended

window console:

2 x app quiting...

这只是最小的现场还原，在我的真实情况中onAppQuit被放在了更深层次的React组件中，它甚至被执行了6次之多。
我尝试把onAppQuit放在React组件之外:

window.api.onAppQuit(() => {
  console.log('app quiting...')
})

function App() {
  return <h1>Some Here</h1>
}

export default App

这时候它只被执行了一次。这可能和electron和react的生命周期有关，求指点。

[alex8088]

在路由切换时应该注销事件监听，否则就会重复注册， https://github.com/alex8088/electron-toolkit/tree/master/packages/preload

const removeListener = window.electron.ipcRenderer.on('electron:reply', (_, args) => {})
removeListener()