当前位置：首页 > React

react如何定时提醒

2026-02-26 09:14:07React

使用 setTimeout 和 setInterval

在 React 中，可以使用 JavaScript 原生的 setTimeout 和 setInterval 实现定时提醒功能。setTimeout 用于单次提醒，setInterval 用于周期性提醒。

单次提醒示例：

import React, { useEffect } from 'react';

function Reminder() {
  useEffect(() => {
    const timer = setTimeout(() => {
      alert('时间到了！');
    }, 5000); // 5秒后触发

    return () => clearTimeout(timer); // 组件卸载时清除定时器
  }, []);

  return <div>5秒后会有提醒</div>;
}

周期性提醒示例：

import React, { useEffect } from 'react';

function PeriodicReminder() {
  useEffect(() => {
    const interval = setInterval(() => {
      alert('每隔3秒提醒一次');
    }, 3000);

    return () => clearInterval(interval); // 组件卸载时清除定时器
  }, []);

  return <div>每隔3秒会有提醒</div>;
}

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

为了复用定时逻辑，可以创建一个自定义 Hook，例如 useTimer。

import { useEffect } from 'react';

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

function CustomTimerComponent() {
  useTimer(() => {
    console.log('自定义 Hook 触发的提醒');
  }, 2000);

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

结合 Notification API 实现浏览器通知

如果需要更显眼的提醒，可以调用浏览器的 Notification API（需用户授权）。

react如何定时提醒

import React, { useEffect } from 'react';

function NotificationReminder() {
  useEffect(() => {
    const timer = setTimeout(() => {
      if (Notification.permission === 'granted') {
        new Notification('提醒', { body: '任务已完成！' });
      } else if (Notification.permission !== 'denied') {
        Notification.requestPermission().then(permission => {
          if (permission === 'granted') {
            new Notification('提醒', { body: '任务已完成！' });
          }
        });
      }
    }, 5000);

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

  return <div>5秒后发送浏览器通知</div>;
}

使用第三方库（如 react-toastify）

对于更丰富的提醒样式，可以使用第三方库如 react-toastify。

安装：

npm install react-toastify

示例代码：

react如何定时提醒

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

function ToastReminder() {
  useEffect(() => {
    const timer = setTimeout(() => {
      toast.success('任务提醒！');
    }, 3000);

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

  return <div>3秒后显示 Toast 提醒</div>;
}

结合日期时间库（如 date-fns）

如果需要基于特定时间点触发提醒，可以使用日期时间库（如 date-fns）计算时间差。

安装：

npm install date-fns

示例代码：

import React, { useEffect, useState } from 'react';
import { differenceInMilliseconds, parseISO } from 'date-fns';

function ScheduledReminder() {
  const [targetTime] = useState('2023-12-31T23:59:59');

  useEffect(() => {
    const targetDate = parseISO(targetTime);
    const now = new Date();
    const delay = differenceInMilliseconds(targetDate, now);

    if (delay > 0) {
      const timer = setTimeout(() => {
        alert('新年快乐！');
      }, delay);

      return () => clearTimeout(timer);
    }
  }, [targetTime]);

  return <div>在指定时间（{targetTime}）触发提醒</div>;
}