背景
在前端开发中，经常需要进行定时器的操作，比如每隔一段时间请求后台获取数据，或者对某些 DOM 元素进行周期性更新等等。react-high-timer 是一个基于 React 的高性能定时器工具，可以帮助开发者快速实现各种定时器功能。
安装
使用 npm 进行安装：
npm install react-high-timer
使用
在组件中引入 react-high-timer：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----- - ---- -------------------
-------- ----- -
----- ------- --------- - ------------
------------ -- -
----- ----- - --- --------
-------------- -- -
-------------- -- ----- - ---
-- ------
------ -- -- -
-------------
--
-- ----
------ -
-----
-------------------
------
--
-
------ ------- ----上述代码会在组件渲染时实例化一个 Timer，并记录定时器返回的 ID，然后在组件卸载时清除该定时器。
参数
Timer 的构造函数有两个可选参数：options 和 autoStart。
options
interval: 定时器运行的时间间隔，默认值为 1000 毫秒。delay: 定时器启动的延迟时间，默认值为 0 毫秒。loop: 定时器是否循环运行，默认值为 true。immediate: 是否在 Timer 实例化时立即启动定时器，默认值为 true。manual: 是否需要手动控制定时器运行和停止，默认值为 false。
autoStart
控制是否在 Timer 实例化时立即启动定时器，默认值为 true。
方法
Timer 实例提供了以下方法：
start(callback: Function, interval?: number)
启动定时器，并在指定时间间隔上运行回调函数。
stop()
停止定时器。
pause()
暂停定时器。
resume()
恢复定时器。
restart()
重新启动定时器。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----- - ---- -------------------
-------- ----- -
----- -------- ---------- - ------------
----- -------- ---------- - ------------
----- -------- ---------- - ------------
----- ------ - --- ------- ----- ------ ---------- ----- ---
------------ -- -
--------------- -- -
---------------- -- ------ - ---
-- ------
---------------- -- -- -
------------------- ------
---
------ -- -- -
--------------
--
-- ----
----- ------ - --- ------- ------- ---- ---
------------ -- -
----------------- -- -- -
---------------- -- ------ - ---
---
-- ----
----- ----------- - -- -- -
------------------
--
----- ---------- - -- -- -
--------------
--
----- ------ - --- ------- --------- --- ---
------------ -- -
----------------- -- -- -
---------------- -- ------ - ---
---
-- ----
------ -
-----
---------------------
------- ----------- -- -------------------------------
---------------------
------- -------------------------------------
------- ------------------------------------
---------------------
------
--
-
------ ------- ----上述代码演示了如何在组件中使用 Timer，包括通过 start、stop、pause、resume、restart 方法控制定时器的运行，以及在 start 方法中传递时间间隔控制定时器运行的时间间隔。
总结
通过 react-high-timer，我们可以非常方便地实现各种场景下的定时器操作，具有很高的性能和灵活性。当然，在使用定时器时也需要注意细节，比如定时器回调中不要 directly mutate state、需要在组件卸载时清除定时器等等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601581e8991b448de294