Блог

В компоненте react на основе классов вы могли бы просто сделать;

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

Хотя я не уверен, как это сделать в компоненте на основе функций с перехватчиками реакции?

В моем приложении я выполняю описанную ниже функцию при нажатии кнопки в компоненте 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});
  

Есть идеи? Даже вокруг лучшего метода перенаправления, чтобы попасть на / via react-router-dom или как эффективно отписаться от прослушивателей событий?

Сделайте второй useEffect исключительно для использования размонтирования. Пустые зависимости в useEffect позволяют ему эффективно функционировать как a componentDidMount , а возврат этого эффективно функционирует как a componentWillUnmount .

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

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