ReactJS中多相同组件重复事件监听器的优化方法问询

方案1：使用Ref精准判断点击区域，保留组件独立性 #

当前代码里event.target.parentElement.classList.contains('dropdown')的判断存在缺陷（比如点击Dropdown内部深层子元素时，父元素链可能不包含dropdown类），同时每个组件重复绑定事件的问题，可以通过Ref优化判断逻辑，组件卸载时也会正确移除监听器：

修改Dropdown组件代码：

import { useState, useEffect, useRef } from 'react';

export default function Dropdown(props) {
  const [showDropdown, setShowDropdown] = useState(false);
  const dropdownRef = useRef(null); // 创建Ref标记Dropdown容器

  function closeDropdown(event) {
    // 判断点击是否在当前Dropdown容器外部
    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
      setShowDropdown(false);
    }
  }

  useEffect(() => {
    document.addEventListener('click', closeDropdown);

    return () => {
      document.removeEventListener('click', closeDropdown);
    };
  }, []);

  return (
    <div ref={dropdownRef} className='dropdown-container dropdown'>
      {/* 组件内部内容 */}
    </div>
  );
}

这个方案里每个Dropdown仍会绑定自己的document点击事件，但通过Ref的contains方法判断点击区域更精准，且组件卸载时会自动移除对应监听器，不会造成内存泄漏。如果在意多监听器的性能影响，可选择下面的方案2。

方案2：全局仅绑定一次document点击事件，通过Context统一管理 #

要彻底避免重复绑定，可创建全局Dropdown上下文，只绑定一次document点击事件，所有Dropdown通过上下文同步状态：

步骤1：创建DropdownContext #

// DropdownContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const DropdownContext = createContext();

export function DropdownProvider({ children }) {
  const [openDropdownId, setOpenDropdownId] = useState(null);

  useEffect(() => {
    function handleGlobalClick(event) {
      // 点击外部时关闭当前打开的Dropdown
      const isClickInsideDropdown = event.target.closest('.dropdown-container');
      if (!isClickInsideDropdown) {
        setOpenDropdownId(null);
      }
    }

    document.addEventListener('click', handleGlobalClick);
    return () => document.removeEventListener('click', handleGlobalClick);
  }, []);

  return (
    <DropdownContext.Provider value={{ openDropdownId, setOpenDropdownId }}>
      {children}
    </DropdownContext.Provider>
  );
}

export function useDropdown() {
  return useContext(DropdownContext);
}

步骤2：修改Dropdown组件使用Context #

import { useRef } from 'react';
import { useDropdown } from './DropdownContext';

export default function Dropdown({ id, ...props }) {
  const { openDropdownId, setOpenDropdownId } = useDropdown();
  const showDropdown = openDropdownId === id;
  const dropdownRef = useRef(null);

  function toggleDropdown() {
    setOpenDropdownId(prev => prev === id ? null : id);
  }

  return (
    <div ref={dropdownRef} className='dropdown-container dropdown' onClick={toggleDropdown}>
      {/* 组件内部内容，注意下拉列表内部点击需阻止冒泡，避免误触发toggle */}
    </div>
  );
}

步骤3：在父组件外层包裹Provider #

import { DropdownProvider } from './DropdownContext';
import Dropdown from './Dropdown';

export default function Preference() {
  return (
    <DropdownProvider>
      <div className="container">
        <Dropdown
          id="difficulty-dropdown"
          list={Object.values(DIFFICULTY)}
          placeholderText="difficulty"
          size="size-1"
        />
        <Dropdown
          id="category-dropdown"
          list={Object.values(CATEGORIES)}
          placeholderText="category"
          size="size-2"
        />
        <Link to="/quiz">
          <button className="btn-large">Take Quiz</button>
        </Link>
      </div>
    </DropdownProvider>
  );
}

这个方案全局只会绑定一次document点击事件，所有Dropdown通过上下文的openDropdownId控制显示状态，既解决了重复绑定问题，还能实现“打开一个Dropdown时自动关闭其他Dropdown”的交互效果。

方案3：在父容器上使用事件委托 #

如果所有Dropdown都集中在同一个父容器内（比如Preference的.container），可以在父容器上绑定一次点击事件，通过事件委托处理所有Dropdown的关闭逻辑：

修改Preference父组件（需配合状态提升或Ref调用Dropdown内部方法）：

import { useRef, useState } from 'react';
import Dropdown from './Dropdown';

export default function Preference() {
  const containerRef = useRef(null);
  const [openDropdownKeys, setOpenDropdownKeys] = useState({
    difficulty: false,
    category: false
  });

  function handleContainerClick(event) {
    const dropdowns = containerRef.current.querySelectorAll('.dropdown-container');
    dropdowns.forEach((dropdown, index) => {
      const key = index === 0 ? 'difficulty' : 'category';
      if (!dropdown.contains(event.target) && openDropdownKeys[key]) {
        setOpenDropdownKeys(prev => ({ ...prev, [key]: false }));
      }
    });
  }

  return (
    <div ref={containerRef} className="container" onClick={handleContainerClick}>
      <Dropdown
        list={Object.values(DIFFICULTY)}
        placeholderText="difficulty"
        size="size-1"
        showDropdown={openDropdownKeys.difficulty}
        setShowDropdown={(val) => setOpenDropdownKeys(prev => ({...prev, difficulty: val}))}
      />
      <Dropdown
        list={Object.values(CATEGORIES)}
        placeholderText="category"
        size="size-2"
        showDropdown={openDropdownKeys.category}
        setShowDropdown={(val) => setOpenDropdownKeys(prev => ({...prev, category: val}))}
      />
      <Link to="/quiz">
        <button className="btn-large">Take Quiz</button>
      </Link>
    </div>
  );
}

该方案适合Dropdown数量较少且集中的场景，通过状态提升将Dropdown的显示状态统一管理，父容器的单次事件绑定就能处理所有外部点击关闭逻辑。

内容的提问来源于stack exchange，提问作者Jatin Chhabra