Question

我有一个React / Electron应用程序。我需要从main.js获取一些数据库表，我需要将状态设置为该表。

为此，我写了以下听众：

ipcRenderer.on('sendTable', (evt, arg) => {
  this.props.setTable(arg);
});

等待main.js发送＆＃39; sendTable＆＃39;事件，以表为参数。然后，我将Redux商店设置为该表。这种作品。

但是，我不知道把听众放在哪里。如果我把它放在我的组件的构造函数或渲染函数中，我最终会得到一个无限循环。但我需要设置一次，因为我需要倾听。我可以把它放在哪里？

Answer 1

将事件监听器附加到componentDidMount并在componentWillUnmount中分离事件监听器是一种很好的做法！

参见代码示例：

class Foobar extends Component {

  componentDidMount() {
    ipcRenderer.on('sendTable', (evt, arg) => {
      this.props.setTable(arg);
     });
  }

  componentWillUnmount() {
    // Make sure to remove the DOM listener when the component is unmounted
    // read the ipcMain documentation to understand how to attach and detach listeners
    ipcMain.removeListener(channel, listener)
  }

  render() {
   // stuff
  }

}

如何避免在React Component中使用事件侦听器进行无限重新渲染？

1 个答案: