Javascript 将window.addEventListener添加到react中的componentDidMount方法是否正确？

我使用react创建了新的便笺应用程序，并创建了用于添加新便笺的模式

对于关闭模式，我在App.js componentDidMount方法中将

addEventListener

添加到

window

const modal = document.querySelector('.modal');
const windowOnClick = (event) => {
  if (event.target === modal) {
      modal.classList.toggle('showModal');
      this.setState({ isModalOpen: false });
  }
}
window.addEventListener('click', windowOnClick);

---

这是工作，但我想知道这是在react中执行此操作的最佳实践吗？

您现在可以在hooks中执行此操作

比如：

     function toggleModal() {
      const [isOpen, setModalState] = useState(false);

      useEffect(() => {
        const setToggle = () => setModalState(!isOpen);
        window.addEventListener('click', windowOnClick);
        return () => {
          window.removeEventListener('click', windowOnClick);
        };
      });

      return isOpen;
}

我想这可能是一种更干净的方式。 在React中，React正在远离基于类的组件（请参阅React文档），它创建了一个特定的钩子来做特定的事情，通常很多不同的东西被塞进了componentDidMount中，IMHO，在生命周期方法中混淆了关注点。使用钩子也可以使逻辑对其他组件可用。有关更多信息，请参阅React文档

---

有关更多信息，请参阅React文档。

否，这是一个常见的用例。如果您想在单击模式之外的任何位置时关闭模式，那么这样做将是最简单的方法。感谢您回答@ETRAHAN是什么让这比使用类组件并在componentDidMount生命周期中执行相同操作更“干净”？是的，我知道，我并不是说您不正确，但你也许可以在最初的答案中添加这一解释。还有，这是如何回答当前问题的？您能否至少提供一个基于当前问题使用自定义挂钩的示例？