当前位置：首页 > React

react如何定时提醒

2026-01-23 19:18:58React

使用 setTimeout 和 setInterval 实现定时提醒

在 React 中实现定时提醒可以通过 JavaScript 的 setTimeout 和 setInterval 方法来实现。这两种方法适用于不同的场景，setTimeout 用于单次提醒，setInterval 用于周期性提醒。

react如何定时提醒

import React, { useEffect } from 'react';

function Reminder() {
  useEffect(() => {
    // 单次提醒，5秒后触发
    const timeoutId = setTimeout(() => {
      alert('这是你的提醒！');
    }, 5000);

    // 周期性提醒，每10秒触发一次
    const intervalId = setInterval(() => {
      alert('周期性提醒！');
    }, 10000);

    // 清除定时器
    return () => {
      clearTimeout(timeoutId);
      clearInterval(intervalId);
    };
  }, []);

  return <div>定时提醒组件</div>;
}

export default Reminder;

使用自定义 Hook 封装定时逻辑

为了复用定时提醒的逻辑，可以将其封装为一个自定义 Hook。这种方式使得代码更加模块化，便于维护。

react如何定时提醒

import { useEffect } from 'react';

function useTimer(callback, delay) {
  useEffect(() => {
    const timerId = setInterval(callback, delay);
    return () => clearInterval(timerId);
  }, [callback, delay]);
}

function Reminder() {
  useTimer(() => {
    alert('周期性提醒！');
  }, 10000);

  return <div>自定义 Hook 实现的定时提醒</div>;
}

export default Reminder;

结合状态管理实现动态提醒

如果需要动态调整提醒时间或内容，可以结合 React 的状态管理来实现。例如，使用 useState 存储提醒时间和内容。

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

function DynamicReminder() {
  const [reminderTime, setReminderTime] = useState(5000);
  const [reminderText, setReminderText] = useState('默认提醒内容');

  useEffect(() => {
    const timerId = setTimeout(() => {
      alert(reminderText);
    }, reminderTime);

    return () => clearTimeout(timerId);
  }, [reminderTime, reminderText]);

  return (
    <div>
      <input
        type="number"
        value={reminderTime}
        onChange={(e) => setReminderTime(Number(e.target.value))}
      />
      <input
        type="text"
        value={reminderText}
        onChange={(e) => setReminderText(e.target.value)}
      />
    </div>
  );
}

export default DynamicReminder;

使用第三方库（如 react-toastify）实现优雅提醒

如果需要更美观的提醒效果，可以使用第三方库如 react-toastify。该库提供了丰富的提醒样式和配置选项。

import React, { useEffect } from 'react';
import { toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

function ToastReminder() {
  useEffect(() => {
    const timerId = setTimeout(() => {
      toast.success('提醒成功！', { autoClose: 3000 });
    }, 5000);

    return () => clearTimeout(timerId);
  }, []);

  return <div>使用 react-toastify 实现提醒</div>;
}

export default ToastReminder;