在 React 中如何使用定时器-Toy模板网

这篇具有很好参考价值的文章主要介绍了在 React 中如何使用定时器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在React中使用定时器通常有两种方式：使用setInterval和setTimeout函数。

使用setInterval函数：

首先，在组件中导入useEffect和useState函数：

       import React, { useEffect, useState } from "react";

在组件中声明一个状态变量来存储定时器的ID：

        const [timerId, setTimerId] = useState<number | null>(null);

在组件的useEffect钩子函数中启动定时器：

       useEffect(() => {
         const id = setInterval(() => {
           // 定时器执行的代码
         }, 1000);
         setTimerId(id);
         return () => {
           clearInterval(timerId); // 组件卸载时清除定时器
         };
       }, []);

在上述代码中，通过useEffect中的一个空数组([])作为依赖项，确保只在组件挂载时启动一次定时器，并使用clearInterval函数在组件卸载时清除定时器。

使用setTimeout函数：

首先，在组件中导入useEffect和useState函数：

        import React, { useEffect, useState } from "react";

在组件中声明一个状态变量来存储定时器的ID：

        const [timerId, setTimerId] = useState<number | null>(null);

在组件的useEffect钩子函数中启动定时器：

       useEffect(() => {
         const id = setTimeout(() => {
           // 定时器执行的代码
         }, 1000);
         setTimerId(id);
         return () => {
           clearTimeout(timerId); // 组件卸载时清除定时器
         };
       }, []);

在上述代码中，通过useEffect中的一个空数组([])作为依赖项，确保只在组件挂载时启动一次定时器，并使用clearTimeout函数在组件卸载时清除定时器。

请根据你的具体需求选择适合的定时器函数，并根据组件的生命周期来启动和清除定时器。

实际案例：

import { useEffect, useState } from "react";

const TimerPage = () => {
  const [changeNum, setChangeNum] = useState<any>(null);
  const [getChangeNum, setGetChangeNum] = useState<any>(null);

  const initiate = () => {
    let num = 0;
    const id = setInterval(() => {
      // 定时执行的代码
      num++;
      if (num == 11) {
        // clearTimeout(id); // 在 getChangeNum 等于 10 时关闭定时器
        num = 0;
      }
      setGetChangeNum(num);
    }, 1000); // 每隔1秒执行一次
    setChangeNum(id);
  };

  return (
    <div className="box">
      <p onClick={initiate}>显示数字 {getChangeNum} </p>
    </div>
  );
};

export default TimerPage;

首先，声明了一个变量num并初始化为0，用来存储递增的数字。
然后，使用setInterval函数创建了一个定时器。setInterval函数接受两个参数：回调函数和时间间隔。在这里，回调函数为一个箭头函数，用于执行定时的递增操作。
在回调函数中，num自增1，表示递增的数字。当num等于11时，通过条件判断将num重置为0，实现周期递增的效果。
在回调函数中，使用setGetChangeNum函数将递增的结果num更新到getChangeNum状态变量中，以便将其显示在文本段落元素中。
setInterval的第二个参数为时间间隔，这里设置为1000毫秒，即每隔1秒执行一次回调函数。
最后，使用setChangeNum函数将定时器的ID存储到changeNum状态变量中，以便在需要的时候清除定时器。