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

Question

在基于 class 的 React 组件中，您可以简单地做；

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 的导出包装在 react-router-dom 的 withRouter 函数中以重定向到路由地址。

export default withRouter(LoginCard);

在 LoginCard 组件中，我有一个 Tabs 组件，它在 useEffect 挂钩中有事件侦听器。

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

但是，当我在 LoginCard 中单击该按钮并重定向到 /，然后调整 window 的大小时，调整大小事件列表器 setUnderLineStyle(getUnderlineStyle()) 中的函数得到打电话。

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

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

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

Answer 1

制作第二个useEffect 仅用于卸载。 useEffect 中的空依赖项使其有效地充当 componentDidMount，而 return 有效地充当 componentWillUnmount.

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

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

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

Unsubscribe from event listener react hooks

javascript

event-listener

reactjs

react-router

react-router-dom