在 React 开发过程中，我们通常需要使用计时器来控制组件的渲染和状态的变化。但是，React 并没有提供内置的计时器功能。为了实现这个功能，我们可以使用第三方库 react-timer-mixin。
安装
要使用 react-timer-mixin，我们需要先通过 npm 安装它。在终端中运行以下命令：
npm install react-timer-mixin
使用
安装完成后，在需要使用计时器的组件中导入 react-timer-mixin：
import TimerMixin from 'react-timer-mixin';
然后，在组件类上混合 TimerMixin：
class MyComponent extends React.Component {
mixins: [TimerMixin]
// ...
}现在，我们可以在组件中使用 TimerMixin 提供的计时器方法。
setTimeout(callback, delay)
setTimeout 方法会在指定的延迟时间之后执行回调函数。例如：
this.setTimeout(() => {
console.log('5 秒钟后执行');
}, 5000);setInterval(callback, interval)
setInterval 方法会每隔一段时间执行一次回调函数。例如：
this.setInterval(() => {
console.log('每隔一秒钟执行一次');
}, 1000);requestAnimationFrame(callback)
requestAnimationFrame 方法会在下次浏览器绘制之前执行回调函数。例如：
this.requestAnimationFrame(() => {
console.log('下次浏览器绘制之前执行');
});clearTimeout(timeoutID)
clearTimeout 方法可以取消之前通过 setTimeout 创建的计时器。例如：
const timeoutID = this.setTimeout(() => {
console.log('5 秒钟后执行');
}, 5000);
this.clearTimeout(timeoutID);clearInterval(intervalID)
clearInterval 方法可以取消之前通过 setInterval 创建的计时器。例如：
const intervalID = this.setInterval(() => {
console.log('每隔一秒钟执行一次');
}, 1000);
this.clearInterval(intervalID);总结
使用 react-timer-mixin 可以方便地在 React 组件中使用计时器功能。通过混合 TimerMixin，我们可以使用 setTimeout、setInterval 和 requestAnimationFrame 等计时器方法。另外，清除计时器的方法也非常简单，只需要分别调用 clearTimeout 和 clearInterval 并传入相应的计时器 ID 即可。
注意，在使用 TimerMixin 的时候，要确保组件类中使用 mixins 的语法来引入 mixin。此外，需要注意避免与其他计时器库或函数产生冲突。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------
----- ----------- ------- --------------- -
------- ------------
------------------- -
------------------ -- -
-------------- --------
-- ------
------------------- -- -
-------------------------
-- ------
----------------------------- -- -
---------------------------
---
-
---------------------- -
--------------------
---------------------
-
-------- -
------ -----------------
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/41592