时间戳

首页 > 解决方案 > 反应组件实例化一个类但正在复制

javascript - 反应组件实例化一个类但正在复制

问题描述

我有一个组件（这只是一个简化的示例）

从'./timer.js'导入计时器；

function Clock()
{
    useEffect(()=>{
        oTimer= new Timer();
    });
... etc

}

然后在我的 timer.js 里面

class Timer{
   constructor(){
      this.interval = setInterval(()=>console.log('triggered'), 1000)
   }

}

所以问题是，每次我的时钟组件在 DOM 上重绘时，计时器都会再次重复......所以每 1 秒打印一次，它会触发 4 或 5 次。

尝试 [] 空参数解决了两次重绘...但考虑以下...

我为 oSlider 实例化类...然后当道具改变时（即组件用额外的幻灯片重绘，我想重新初始化（根据幻灯片的数量重新计算幻灯片的长度等）

但是，当我在道具更新上调用 useEffect 时，oSlider 为假

  var oSlider = false;
    useEffect(()=>{
        if (document.getElementsByClassName("slideShow").length>0)
        {
            console.log("drew slider again");
            oSlider = new Slider(600, document.getElementsByClassName("slideShow")[0]);
        }
    },[]);

    useEffect(()=>{
        /// oSlider is is false still... 
        console.log("trying to trigger initi", oSlider)
    },[props]);

标签： javascriptreactjs

解决方案

要使useEffect(...)仅在 Mount 上触发一次，您应该将一个空数组添加到它的依赖项中。

尝试：

function Clock()
{
   useEffect(()=>{
       oTimer= new Timer();
   }, []);
... etc

}

编辑：

正如 HMR 指出的那样，您还可以在任何 useEffect 中返回一个函数，以便在 unMount 上调用它。

暗示你的 Timer 类有一个endTimer方法，你的代码看起来像这样

function Clock()
{
    useEffect(()=>{
        oTimer= new Timer();
        return () => oTimer.endTimer()
    }, []);
... etc

}

推荐阅读