React useEventListener钩子

在给定元素上添加指定事件类型的事件监听器。

• 使用useRef()钩子创建一个引用，用于保存handler。
• 使用useEffect()钩子在handler发生变化时更新savedHandler引用的值。
• 使用useEffect()钩子在给定元素上添加事件监听器，并在卸载时进行清理。
• 省略最后一个参数el，默认使用Window。

const useEventListener = (type, handler, el = window) => {
  const savedHandler = React.useRef();

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

  React.useEffect(() => {
    const listener = e => savedHandler.current(e);

    el.addEventListener(type, listener);

    return () => {
      el.removeEventListener(type, listener);
    };
  }, [type, el]);
};

const MyApp = () => {
  const [coords, setCoords] = React.useState({ x: 0, y: 0 });

  const updateCoords = React.useCallback(
    ({ clientX, clientY }) => {
      setCoords({ x: clientX, y: clientY });
    },
    [setCoords]
  );

```javascript
useEventListener('mousemove', updateCoords);

return (
  <p>鼠标坐标：{coords.x}，{coords.y}</p>
);
};

ReactDOM.createRoot(document.getElementById('root')).render(
<MyApp />
);