javascript - 使用重组时在哪里设置 `setInterval`？

Question

我正在尝试构建一个简单的计时器，它将在单击时启动和停止。我的所有项目都是基于功能组件的(使用重组)，所以我不确定在哪里设置 setInterval。

这是我尝试玩的东西，直到我完全迷失了在哪里存储 setInterval 这样我就可以在 onStop fn 上清除它(即将在按钮上触发) - 因为在功能组件中没有 this 我可以放置计时器并将其从......功能组件的方式是什么？

https://codepen.io/anon/pen/jQQZrm?editors=0010

有什么建议吗？- 使用 native react 谢谢。

Answer 1

你在这里需要 3 个不同的状态处理程序:stopTimer、startTimer 和 updateValue(我使用的命名与你的代码略有不同) .

在 startTimer 中，您需要创建计时器，该计时器通过计时器运行 updateValue。换句话说，您需要从另一个状态处理程序间接调用一个状态处理程序。

有no way doing that .但。您可以将这些处理程序分成两组:“value + updateValue”和“stopTimer + startTimer + intervalId”。然后你将能够从第一个集合中的第二个集合中获取状态处理程序作为 props:

const EnchanceApp = compose(
  withStateHandlers({
    timer: 0,
  }, {
    updateValue: ({timer}) => 
        () => ({timer: timer + 1})
  }),
  withStateHandlers({
    timerId: 0,
  }, {
    startTimer: ({timerId}, {updateValue}) => 
        () => {
            clearInterval(timerId);
            return {
                timerId: setInterval(updateValue, 1000)
            };
        },
    stopTimer: ({timerId}) => 
        () => clearInterval(timerId)
  })
)(App);