javascript - 取消订阅事件监听器 react Hook

在基于类的react组件中，您可以轻松完成；

componentWillUnmount() {
  window.removeEventListener('resize', this.resizeHandler);
}

虽然我不确定如何在带有React Hooks的基于函数的组件中执行此操作？

在我的应用程序中，我在Component LoginCard中单击按钮后执行以下功能。

const handleLogin = (email, password) => {
  loginService.login(email, password)
    .then((response) => {
      if (!response.error) {
        props.history.push("/");
      }
    });
}

然后，我将LoginCard的导出内容包装在withRouter的react-router-dom函数中，以重定向到路由地址。
export default withRouter(LoginCard);
在LoginCard组件内部，我有一个Tabs组件，该组件在useEffect挂钩中具有事件侦听器。

useEffect(() => {
      setUnderLineStyle(getUnderlineStyle());
      window.addEventListener("resize", _.throttle(() => {
         setUnderLineStyle(getUnderlineStyle())},
         300),
         {passive:true});
   }, [props]);

但是，当我单击LoginCard中的该按钮并重定向到/然后调整窗口大小时，将调用resize事件列表器setUnderLineStyle(getUnderlineStyle())内部的函数。

我试图在useEffect中添加以下内容，但setUnderLineStyle(getUnderlineStyle())仍会在调整大小时被调用。

return () => window.removeEventListener("resize", _.throttle(() => {
                setUnderLineStyle(getUnderlineStyle())},
                300),
                {passive:true});

有任何想法吗？甚至围绕更好的重定向方法，可以通过/到达react-router-dom或如何有效地取消订阅事件监听器？

最佳答案

仅出于卸载目的而制作第二个useEffect。 useEffect中的空依赖关系使其有效地充当componentDidMount，而返回则有效地充当componentWillUnmount。

useEffect(() => {
    // Do mounting stuff here

    return () => {
        // Do unmounting stuff here
    };
}, []);