Question

我正在用React构建一个小游戏，我将在其上设置一个倒数计时器。

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

这很好用，但计时器开始计算组件安装的时刻。我想有一个计时器开始计数onClick。

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

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

我还尝试将这两种方法与适当的状态（{secondsElapsed：0}）一起移动到Timer组件上，因为Timer是一个单独的组件，通过props与其父进行通信。这也没有运气。

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

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

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

任何精通的建议都将受到赞赏。

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

关于我到目前为止的一个例子，基本上看看＆＃34; A Stateful Component＆＃34;

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>
}

React--定时器点击按钮开始计算秒数

1 个答案: