Question

我想实现一个具有暂停/恢复功能的计时器，该功能可以在任何React组件上访问。每个React组件都可以在全局计时器中添加一个新间隔。

我将使用Typescript。

例如使用此伪代码：

// assume GlobalTimer is the Timer class I need to implement

class MyReactComponent {
  myTimer: <some type from GlobalTimer>

  componentDidMount() {
    this.myTimer = GlobalTimer.addEvent({
      delay: 2000, // 2 seconds
      onEnd: this.onTimerEnd,
    });
  }

  componentWillUnmount() {
    // either destroy each timer individually
    this.myTimer.destroy();

    // or something more cool but not sure if possible to accomplish:
    // GlobalTimer.getTimersForComponent(this).forEach( (timer) => timer.destroy() );
  }

  onEnd() {
     // called when timer fires
  }
}

我希望能够一次暂停所有组件中的所有计时器，这就是为什么我需要在全局级别实现此计时器。

我不确定是否应该使用新的Context完成我想要的工作。有什么建议吗？

Answer 1

使用React的Context API

上下文被设计为共享可被视为“ 全局”数据的React组件树，例如当前经过身份验证的用户，主题或首选语言。

https://reactjs.org/docs/context.html

如何在React应用程序中实现全局计时器？

1 个答案: