React useEffectEvent用法，主要使用场景，与useEffect的区别

React的useEffect hook用于在函数组件中执行副作用操作，例如数据获取、DOM操作、订阅事件等。而useEffectEvent是React-use库中提供的一个额外的hook，它是基于useEffect封装的一个事件监听器。

useEffectEvent的主要使用场景是在函数组件中监听事件，这些事件包括：

• Window事件：resize、scroll、load、unload、beforeunload、popstate
• Document事件：mousemove、mousedown、mouseup、keypress、keydown、keyup、wheel
• XMLHttpRequest事件：loadstart、load、progress、abort、error、timeout、loadend
• Custom事件：自定义事件

与useEffect的区别在于，useEffectEvent会自动移除事件监听器，而useEffect需要在返回函数中手动清除副作用。此外，useEffectEvent还提供了一个回调函数，可以在事件发生时执行。

下面是一个useEffectEvent的使用示例：

import { useEffect, useState } from 'react';
import { useEffectEvent } from 'react-use';
function App() {
  const [scrollY, setScrollY] = useState(window.scrollY);
  const handleScrollY = () => { setScrollY(window.scrollY); };
  useEffect(() => {
    window.addEventListener('scroll', handleScrollY);
    return () => { window.removeEventListener('scroll', handleScrollY); };
  }, []);

  useEffectEvent('scroll', handleScrollY);
  return ( <div> <p>Current scroll position: {scrollY}px</p> </div> );
}
export default App;

在上面的例子中，可以看到我们同时使用了useEffect和useEffectEvent来监听窗口滚动事件，当滚动时，两个回调函数都会执行，以更新scrollY的值。不同的是，useEffect需要手动移除事件监听器，而useEffectEvent会自动移除事件监听器。