无法删除 useEffect 之外的事件侦听器

Question

我在 useEffect 中添加了一个事件侦听器。由于 useEffect 第二个参数 ([])，它在第一次重新渲染后运行一次。然后我尝试在 useEffect 之外（在 handleSearch 函数中）将其删除，但它不起作用。我怀疑它与功能范围有关，但不完全理解。也许有解决方法？

const handleSearch = () => {
  window.removeEventListener('resize', setPageHeightWrapper);
};

const [pageHeight, setPageHeight] = useState(0);

function setPageHeightWrapper() { setPageHeight(window.innerHeight); };
useEffect(() =>{
  window.addEventListener('resize', setPageHeightWrapper);
  return () => {
    window.removeEventListener('resize', setPageHeightWrapper);
  };
}, []);

Answer 1

它不起作用的原因是因为 setPageHeightWrapper 定义了一个内联函数，当组件重新呈现它的一个新实例时，它被创建并且在清除事件监听器时你需要传递相同的设置侦听器时传递的方法。

另一方面，当调用 useEffect 挂钩时，它会从其闭包中获取函数引用，并使用相同的引用来清除侦听器。

使 removeListener 在 useEffect 之外工作的方法是使用 useCallback 钩子

const handleSearch = () => {
  window.removeEventListener('resize', memoHeightWrapper);
};

const [pageHeight, setPageHeight] = useState(0);


const memoHeightWrapper = useCallback(() => {
    setPageHeight(window.innerHeight);
})
useEffect(() =>{
  window.addEventListener('resize', memoHeightWrapper);
  return () => {
    window.removeEventListener('resize', memoHeightWrapper);
  };
}, []);

无法删除 useEffect 之外的事件侦听器

Cannot remove an event listener outside useEffect

javascript

reactjs

react-hooks