取消订阅事件监听器反应钩子答案

【问题标题】：Unsubscribe from event listener react hooks取消订阅事件监听器反应钩子
【发布时间】：2019-08-12 10:07:03
【问题描述】：

在基于类的反应组件中你可以简单地做；

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

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

在我的应用程序中，我在组件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 中的那个按钮并重定向到 / 然后调整窗口大小时，调整大小事件列表器 setUnderLineStyle(getUnderlineStyle()) 中的函数会被调用。

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

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

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

【问题讨论】：

标签： javascript reactjs react-router event-listener react-router-dom

【解决方案1】：

创建第二个useEffect 仅用于卸载。 useEffect 中的空依赖项使其有效地充当componentDidMount，并且其返回有效地充当componentWillUnmount。

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

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

【讨论】：

我认为在您的回答中您缺少对 useEffect( () => {}, []); 的回调