Javascript 过多的事件处理程序会影响React应用程序的性能吗？

我有一个切换按钮

按钮

，可以打开一个下拉菜单。要添加一项功能，如果用户单击屏幕上除该菜单以外的任何位置，则下拉菜单应关闭。因此，为此，我需要创建click处理程序，并保留发生单击的节点的记录。如果单击来自下拉节点外部，则菜单应关闭。代码如下：

  state = {
    menuTogglerOpen: false
  }

  componentWillMount() {
    document.addEventListener("mousedown", this.handleClick, false)
  }
  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClick, false)
  }

  handleClick = event => {
    if (this.togglerNode.contains(event.target)) {
      return
    }
    this.closeMenuTogglerFromOutside()
  }

  closeMenuTogglerFromOutside = () => {
    this.setState({
      menuTogglerOpen: false
    })
  }

  handleMenuToggler = () => {
    this.setState({
      menuTogglerOpen: !this.state.menuTogglerOpen
    })
  }

JSX

评论：

---

您可以在菜单打开时附加事件侦听器，并在菜单关闭时将其删除。传统上，大多数模态都是这样实现的。仅当模式打开时，您才希望侦听单击关闭事件

这可能对您的代码库适用，也可能不适用，但您可能还想考虑在<代码>组件WunNuns<代码>上删除事件侦听器，这样您就避免了任何潜在的内存泄漏。这包括组件卸载而不调用

closeMenuToggler

的情况，在这种情况下，您将保持陈旧事件侦听器运行

componentWillUnMount() {
  if (this.state.menuTogglerOpen) {
    document.removeEventListener("mousedown", this.handleClick, false)
  }
}

handleClick = event => {
  if (this.togglerNode.contains(event.target)) {
    return
  }
  this.closeMenuToggler()
}

openMenuToggler = () => {
  document.addEventListener("mousedown", this.handleClick, false)
  this.setState({
    menuTogglerOpen: true
  })
}

closeMenuToggler = () => {
  document.removeEventListener("mousedown", this.handleClick, false)
  this.setState({
    menuTogglerOpen: false
  })
}

handleMenuToggler = () => {
  if (this.state.menuTogglerOpen) {
    this.closeMenuToggler()
  } else {
    this.openMenuToggler()
  }
}

---

您可以在菜单打开时附加事件侦听器，并在菜单关闭时将其删除。传统上，大多数模态都是这样实现的。只有当模态打开时，您才想监听

单击关闭
event@AlexeiDarmin哇，效果很好。更新了我的问题详细信息：添加了我的解决方案。如果你看到有什么需要担心的，请引导。当页面被更改为其他URL时，我发现内存泄漏
componentWillUnmount（）
解决了该问题。谢谢
handleClick = event => {
    if (this.togglerNode.contains(event.target)) {
      return
    }
    this.closeMenuToggler()
  }

  openMenuToggler = () => {
    document.addEventListener("mousedown", this.handleClick, false)
    this.setState({
      menuTogglerOpen: true
    })
  }

  closeMenuToggler = () => {
    document.removeEventListener("mousedown", this.handleClick, false)
    this.setState({
      menuTogglerOpen: false
    })
  }

  handleMenuToggler = () => {
    if (this.state.menuTogglerOpen) {
      this.closeMenuToggler()
    } else {
      this.openMenuToggler()
    }
  }

componentWillUnMount() {
  if (this.state.menuTogglerOpen) {
    document.removeEventListener("mousedown", this.handleClick, false)
  }
}

handleClick = event => {
  if (this.togglerNode.contains(event.target)) {
    return
  }
  this.closeMenuToggler()
}

openMenuToggler = () => {
  document.addEventListener("mousedown", this.handleClick, false)
  this.setState({
    menuTogglerOpen: true
  })
}

closeMenuToggler = () => {
  document.removeEventListener("mousedown", this.handleClick, false)
  this.setState({
    menuTogglerOpen: false
  })
}

handleMenuToggler = () => {
  if (this.state.menuTogglerOpen) {
    this.closeMenuToggler()
  } else {
    this.openMenuToggler()
  }
}