javascript - 组件卸载和重新安装时跟踪进度条类型状态的最佳方法？

Question

我正在重建/重构我用 vanilla JS 构建的旧网页游戏到 React + Redux。我创建了一种特定类型的按钮，如下所示：

有些按钮有几分钟的冷却时间。

我已经成功地用钩子重建了按钮组件，但意识到了一个大问题。游戏中有“标签”，点击后会带您进入不同的屏幕。这意味着这些按钮将卸载并失去其状态。

当我在处理 vanilla JS 版本时，我处理这个问题的方式是将所有按钮保存在一个数组中，并通过主逻辑循环，我将遍历所有按钮并更新它们的进度。

//some pseudocode

const gameTick = 30

const buttons = [
  {
    name: 'chop tree',
    duration: 2000 // milliseconds,
    currentDuration: 1230,
    ...
  }, {...}
]

// gameLoop gets fired every 30milliseconds
const gameLoop = () => {
  buttons.forEach(btn => {
    if (btn.currentDuration < btn.duration) {
      btn.currentDuration += gameTick
    }
  })
}

setInterval(gameLoop, gameTick)

然后我会计算百分比并将进度条的宽度设置为它。

虽然使用 React + Redux，我可以将按钮存储到状态中，但我将如何处理卸载？如果一个按钮在运行过程中被卸载，它仍然需要在后台更新，所以当用户返回选项卡时，按钮会更进一步，甚至可能完成。

我看不到如何在减速器中获得这些信息，同时不断更新状态并传递给按钮组件。

我必须处理的另一个可能的想法是在我更改选项卡时存储时间戳，然后当我使用按钮切换回选项卡时，我会计算时间差并将其相加。这种方法的问题是您必须切换到正确的选项卡才能完成某些事情。

有任何想法吗？

标签： javascriptreactjs