React-- 计时器在单击按钮时开始计算秒数

Question

我正在使用 React 构建一个小游戏，我准备在其中包含一个倒数计时器。

有很多教程（包括 React 官方文档中的一篇）关于如何使用 React 创建计时器或倒数计时器。然而，它们都使用componentDidMount 和componentWillUnmount 生命周期方法来设置和分别清除间隔。

这可以正常工作，但计时器会在组件安装时开始计数。我想要一个开始计数 onClick 的计时器。

实现这种行为的适当生命周期方法是什么？我已经尝试过componentWillUpdate 和componentDidUpdate，但没有效果。

我的第一个想法是使用 gameOn 状态属性，以便仅在游戏开启时（即按下开始按钮）激活计时器，但这不起作用，因为（我猜）我将 gameOn 设置为 true，在组件 didMount 之后很久。

我还尝试将这两个方法与 Timer 组件上的适当状态 ({secondsElapsed: 0}) 一起移动，因为 Timer 是一个单独的组件，它通过 props 与其父级通信。这也没有运气。

最后我尝试在我的构造函数上设置this.interval = null;，但这对定时器的运行方式没有区别。

我认为问题的根源在于生命周期方法，因为这些控制何时调用 setInterval 和 clearInterval。所以我的问题是：

我应该使用哪些其他生命周期方法组合来实现我所追求的行为？

任何精通的建议将不胜感激。

如果你能清楚地解释为什么以及何时应该在我的构造函数上声明this.interval = null;，则可以加分。

关于我到目前为止的例子，基本上看“A Stateful Component”

Answer 1

componentWillUnmount() {
  clearInterval(this.interval); // Always clean up before unmounting
}

render(){
  <div>
    <button
      onClick={() => { this.interval = setInterval(() => {
        // Do something here e.g. increment the time
        // NOTE: `this` keyword here refers to the component itself
      }, 1000); }}>
      Start
    </button>
  </div>
}