如何在拖动React组件的上下文中删除事件侦听器

Question

释放鼠标时，mousemove似乎没有从document中正确移除。

https://codesandbox.io/s/dragondrop-dqs46

Answer 1

编写自定义钩子useEvent而不是在相关时手动添加和删除 ，该钩子会将处理程序从一个渲染器存储到另一个渲染器：

useEvent.js

import { useEffect, useRef } from "react";

export default function(event, handler, element=window) {

  const savedHandler = useRef();

  useEffect(() => {
    savedHandler.current = handler;
  }, [handler]);

  useEffect(() => {
    const eventListener = event => savedHandler.current(event);
    element.addEventListener(event, eventListener);
    return () => element.removeEventListener(event, eventListener);
  }, [event, element]);
}

components/Dragon.js

useEvent("mousemove", onDrag);
useEvent("mouseup", onDragEnd);

工作笔：https://codesandbox.io/s/dragondrop-ceocx