在react中向componentDidMount方法添加window.addEventListener是正确的吗？

Question

我使用react创建了新的笔记应用程序，并创建了用于添加新笔记的模式。

为了关闭模式，我将addEventListener添加到App.js componentDidMount方法中的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中做这件事的最佳实践吗？

Answer 1

您现在可以在钩子中执行此操作，

类似于：

     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文档)，它制作了一个特定的钩子来做特定的事情，通常很多不同的东西被塞进componentDidMount中，我的天，在生命周期方法中混合了一些关注点。使用钩子也可以使逻辑对其他组件可用。有关更多信息，请参阅React文档。

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