Considere este fragmento,
useEffect(() => { document.addEventListener('mousedown', checkAndCloseMenu); return () => document.removeEventListener('mousedown', checkAndCloseMenu); }, []);Estoy usando este useEffect en un componente desplegable de orden superior, he visto a muy pocos profesionales que usan este tipo de adición y eliminación de detectores de eventos. ¿Está utilizando estos eventListeners anti-patrón? En caso afirmativo, ¿cuál sería el enfoque correcto?
Agregar y eliminar detectores de eventos no se considera un antipatrón.
useEffect(() => { document.addEventListener('mousedown', checkAndCloseMenu); return () => document.removeEventListener('mousedown', checkAndCloseMenu); }, []);Siempre que sea posible, se prefiere usar una referencia de React para acceder a DOMNodes subyacentes:
const ref = React.useRef(); useEffect(() => { const node = ref.current; node.addEventListener('mousedown', checkAndCloseMenu); return () => node.removeEventListener('mousedown', checkAndCloseMenu); }, []); ... <div ref={ref}> ..... </div>o para adjuntar los oyentes directamente
<div onMouseDown={checkAndCloseMenu}> ..... </div> pero a veces esto es inevitable cuando necesita escuchar un evento desde la window y document objetos/nodos.
Lo que se considera antipatrón es mutar directamente un detector de eventos global.
document.onmousedown = checkAndCloseMenu;Al hacerlo, no solo muta un objeto global, sino que reemplaza cualquier valor existente allí. No haga el manejo de eventos como este.