一个基本的定时器按钮设计需要这么两个功能
- 点击触发倒计时
- 倒计时结束自动恢复
我们可以把上面的功能抽象成 React Hook 函数。
javascript
在组件中调用 useTimer。
javascript
但是，这样就足够了吗？反正我是不够的。
功能增强
上面的设计存在几个问题：
- 无法恢复
- 无法退出计时
- 没有精细化的生命周期
无法恢复
当组件卸载时，重新加载组件的时候，无法恢复到原来的状态。这个解决方法是存结束的时间戳。
javascript
在这里，增加了一个id参数，这个参数的目的是为了存储时间戳的标识，建议用组件名。
javascript
在 React Native 中，当应用在后台时，系统会中断应用的定时器。这样的中断过程并不会触发组件卸载，那么即便恢复过来，也会有很明显的误差。所以我们需要使用通过AppState 来获取应用状态，并记录下应用退出时的时间戳。
js
当 userTimer 中的定时器恢复时，就能计算出来应用在后台经过了多久。
js
无法退出计时
针对这一点，可以增加一个结束调用。
javascript
一般来说，当组件执行的相关提交操作成功，可以判定结束。
javascript
没有精细化的生命周期
这一点怎么理解呢？可以直接看定时器的生命周期图。
一般来说，定时器的有这三个状态：
- 关闭
- 开启
- 暂停
为了实现上述状态，我们需要规定计数器的初始值为-1，只有这样才能保证开启和关闭状态不冲突。针对暂停状态，我们需要得到组件卸载的钩子函数。
下面给出代码。
javascript
在组件中，就可以这样调用。
jsx
完整代码
js
做个总结
本文介绍了如何在 React Native 里面使用定时器按钮逻辑并给出了设计思路和代码。如果喜欢本文，欢迎点赞和收藏。如果对本文有任何疑问，欢迎在评论区指出，不胜感激。