Question

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

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

尽管我不确定如何在带有React Hook的基于功能的组件中执行此操作？

在我的应用程序中，我通过单击组件LoginCard上的按钮来执行以下功能。

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

然后将LoginCard的导出包装在withRouter的{{1}}函数中，以重定向到路由地址。

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});到达/还是如何有效地取消订阅事件侦听器？

Answer 1

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

useEffect({
    // Do mounting stuff here

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

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

1 个答案: