React useOnGlobalEvent钩子

在全局对象上发生事件时执行回调函数。

• 使用useRef()钩子创建一个变量listener，用于保存监听器的引用。
• 使用useRef()钩子创建一个变量，用于保存type和options参数的先前值。
• 使用useEffect()钩子和EventTarget.addEventListener()监听给定事件type在Window全局对象上。
• 使用EventTarget.removeEventListener()在组件卸载时移除任何现有的监听器并进行清理。

const useOnGlobalEvent = (type, callback, options) => {
  const listener = React.useRef(null);
  const previousProps = React.useRef({ type, options });

  React.useEffect(() => {
    const { type: previousType, options: previousOptions } = previousProps;

    if (listener.current) {
      window.removeEventListener(
        previousType,
        listener.current,
        previousOptions
      );
    }

    listener.current = window.addEventListener(type, callback, options);
    previousProps.current = { type, options };

    return () => {
      window.removeEventListener(type, listener.current, options);
    };
  }, [callback, type, options]);
};

const App = () => {
  useOnGlobalEvent('mousemove', e => {
    console.log(`(${e.x}, ${e.y})`);
  });

  return <p>移动鼠标</p>;
};

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

ReactDOM.createRoot方法用于创建一个根节点，并将根节点渲染到指定的DOM元素上。在这个例子中，我们将根节点渲染到id为"root"的DOM元素上。

是一个React组件，表示我们要渲染的应用程序。在这个例子中，我们将作为根节点的子节点进行渲染。

注意：这段代码使用了JSX语法，需要使用Babel或类似的工具进行转换才能在浏览器中运行。