React中在componentDidMount添加window.addEventListener是否符合最佳实践？

好问题！你的实现确实能正常跑起来，但从React的最佳实践角度来说，这种直接操作DOM的方式并不是最理想的，我来给你拆解原因和更优的改进方案：

React的核心设计理念是状态驱动UI——我们应该通过管理组件的state来控制界面的显示/隐藏，而不是直接去查询DOM元素、修改className。直接操作DOM会绕开React的虚拟DOM diff机制，可能导致组件状态和实际UI不同步，尤其是在复杂的组件树中，这种写法更容易埋下难以排查的bug，也违背了React的模块化设计思路。

另外，你当前的代码还有一个隐藏问题：只在componentDidMount中添加了window点击监听，却没有在组件卸载时移除它，这会导致内存泄漏——组件销毁后，事件监听依然存在，会持续占用浏览器资源。

方案1：封装独立的Modal组件，内部处理关闭逻辑 #

把模态框封装成一个可复用组件，在组件内部监听点击事件，判断点击目标是否为模态框的背景层，然后调用父组件传入的关闭回调。这种写法完全基于React的状态管理，不需要手动操作DOM。

示例代码：

// Modal.js
import React from 'react';

const Modal = ({ isOpen, onClose, children }) => {
  // 模态框未打开时直接返回null，不渲染
  if (!isOpen) return null;

  const handleBackgroundClick = (e) => {
    // 点击的是模态框最外层背景容器时，触发关闭
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  return (
    <div className="modal showModal" onClick={handleBackgroundClick}>
      <div className="modal-content">
        {/* 模态框内部内容由父组件传入 */}
        {children}
      </div>
    </div>
  );
};

export default Modal;

在App组件中使用：

// App.js
import React, { Component } from 'react';
import Modal from './Modal';

class App extends Component {
  state = {
    isModalOpen: false
  };

  openModal = () => {
    this.setState({ isModalOpen: true });
  };

  closeModal = () => {
    this.setState({ isModalOpen: false });
  };

  render() {
    return (
      <div className="app">
        <button onClick={this.openModal}>添加新笔记</button>
        <Modal isOpen={this.state.isModalOpen} onClose={this.closeModal}>
          <h2>添加新笔记</h2>
          <form>
            {/* 这里放你的笔记表单内容 */}
          </form>
        </Modal>
      </div>
    );
  }
}

export default App;

方案2：如果非要在App中处理window事件，记得清理监听 #

如果出于某些原因，你必须保留window点击监听的写法，一定要在组件卸载时移除监听，同时优化DOM查询的逻辑：

componentDidMount() {
  window.addEventListener('click', this.handleWindowClick);
}

componentWillUnmount() {
  // 组件卸载时移除监听，避免内存泄漏
  window.removeEventListener('click', this.handleWindowClick);
}

handleWindowClick = (event) => {
  const modal = document.querySelector('.modal');
  // 先判断模态框是否存在，再判断点击目标
  if (modal && event.target === modal) {
    this.setState({ isModalOpen: false });
  }
}

React最佳实践更推荐方案1：用状态管理UI，将模态框封装为独立组件，内部处理交互逻辑。这种写法不仅更符合React的设计思想，还能提升代码的可复用性和可维护性，避免直接操作DOM带来的潜在问题。

内容的提问来源于stack exchange，提问作者Javad Ebrahimi