React 组件构造函数中的 ipcRenderer

IT技术 reactjs react-router electron
2021-05-16 23:12:18

我有一个使用 Electron、React 和 React Router 的应用程序。ipcRenderer在组件构造函数中使用将事件从我的组件发送到主 Electron 进程。在我添加 React Router 之后,我注意到每次我离开并回到组件时,我的 ipcRenderer 事件都被一次又一次地添加。我认为这是因为 React Router 正在根据需要安装和卸载组件。

我通过检查事件是否已经像这样注册,找到了解决这个问题的方法:

if (!ipcRenderer._events['open-file-reply']) {
  ipcRenderer.on('open-file-reply', (event, fileContents) => {
    if(fileContents){
      this.setState({
        data: JSON.parse(fileContents)
      }); 
    }   
  }); 
} 

我只是想知道是否有更正确的方法来做到这一点。是否ipcRenderer.on属于在构造函数中,无论如何,还是有一个更合适的地方把它?

编辑

这是迄今为止我想出的最佳解决方案:

import {ipcRenderer} from  'electron';

/* inside React component */
constructor(props) {
  super(props);
  // ...
  this.loadFileListener = this.loadFileListener.bind(this);
  ipcRenderer.on('open-file-reply', this.loadFileListener);
}

componentWillUnmount() {
  ipcRenderer.removeAllListeners(['open-file-reply']);
}

loadFileListener(event, fileContents) {
  // set state and stuff...
}
1个回答

我认为你不应该在安装组件之前设置 IPC,所以我建议使用这种方法:

 constructor(props) {
   super(props)
   this._loadFileListener = this._loadFileListener.bind(this)
 }

 componentDidMount() {
   ipcRenderer.on('open-file-reply', this._loadFileListener)
 }

 componentWillUnmount() {
   ipcRenderer.removeListener('open-file-reply', this._loadFileListener)
 }