每次我向后导航时都会调用 useEffect 中的 React settimeout答案

【问题标题】：React settimeout in useeEffect is called every time I navigate back每次我向后导航时都会调用 useEffect 中的 React settimeout
【发布时间】：2020-09-09 20:30:40
【问题描述】：

我正在尝试更改 setTimeout 和 useEffect 中元素的样式。

下面是代码的样子

In home.js: 
useEffect(()=>{
    setTimeout(()=>{
        // change styles  for 'frontenddevelopment'
        changeStyles1();
    },1000)

    // changeStyles for 'i love frontend'
    changeStyles2()
},[])

我发现主页渲染后如果我导航到其他页面并返回主页，将再次调用changesStyles1（）并且动画将再次运行。当我从其他页面导航回主页时，应该如何避免再次调用 setTimeout()。

如果我从主页导航到其他页面然后返回主页，您会注意到 changeStyle2 不会再次动画。这就是我想要的效果。

我的网站托管在netlify 我在codepen上的代码

【问题讨论】：

能否提供组件树？

标签： reactjs settimeout use-effect

【解决方案1】：

我会从父组件管理它。

让我们假设以下组件树：

应用程序
- 首页
- 第1页

应用内：

const [isFirstMount, setFirstMount] = useState(true);
//...
return(
  <Home ...props changeStyle={isFirstMount} onStyleChanged={() => 
       setFirstMount(false)}/>
  //...
)

在家中：

if (props.changeStyle) {
  let pnt = setTimeout(()=>{
    // change styles  for 'frontenddevelopment'
    changeStyles1();
    onStyleChanged()
    clearTimeout(pnt);
   }, 1000)
}

【讨论】：

非常感谢，这部分我已经尝试过了，我刚刚意识到如果我将安装到全局状态，react 应用程序不会呈现更新的 css 样式。
所以这是一个棘手的问题。如果主页被渲染，并且 app.js 中的 isMounted 设置为 true。然后从其他页面导航回主页将丢失更新的 css 样式。此时，在 app.js 中，isMounted 会告诉 home.js 不要调用 changeStyles()
我们需要查看代码来提供帮助。您能否将相关部分上传到 CodeSandbox 并确保其正常工作？

【解决方案2】：

您需要清除计时器，否则您的代码可能会遇到不良副作用。

useEffect(()=>{
    const timer = setTimeout(()=>{
        // change styles  for 'frontenddevelopment'
        changeStyles1();
    }, 1000)

    // changeStyles for 'i love frontend'
    changeStyles2()
    
    //clear the timer
    return () => clearTimeout(timer);

},[]);

请参阅此link 了解更多信息。

【讨论】：