取消订阅事件侦听器反应挂钩

Question

在基于类的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});

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

Answer 1

让第二useEffect只为使用卸载的。空的依赖关系useEffect使其有效地充当a componentDidMount，而该属性的返回有效地充当a componentWillUnmount。

useEffect({
    // Do mounting stuff here

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