当前位置：首页 > React

react如何定时提醒

2026-02-11 23:19:54React

使用 setTimeout 或 setInterval

在 React 中，可以使用 setTimeout 或 setInterval 来实现定时提醒功能。setTimeout 用于单次提醒，setInterval 用于周期性提醒。

import React, { useEffect } from 'react';

function Reminder() {
  useEffect(() => {
    const timer = setTimeout(() => {
      alert('这是你的提醒！');
    }, 5000); // 5秒后提醒

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

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

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

react-toastify 是一个流行的通知库，可以方便地实现定时提醒功能。

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

function ToastReminder() {
  useEffect(() => {
    const timer = setTimeout(() => {
      toast.info('这是你的提醒！', { autoClose: 3000 });
    }, 5000);

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

  return <div>Toast 提醒组件</div>;
}

结合日期时间实现特定时间提醒

如果需要实现特定时间的提醒，可以结合 Date 对象和 setInterval 检查时间。

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

function ScheduledReminder() {
  const [targetTime] = useState(new Date('2023-10-01T12:00:00').getTime());

  useEffect(() => {
    const checkTime = setInterval(() => {
      const now = new Date().getTime();
      if (now >= targetTime) {
        alert('时间到了！');
        clearInterval(checkTime);
      }
    }, 1000); // 每秒检查一次

    return () => clearInterval(checkTime);
  }, [targetTime]);

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

使用 Web Notification API

如果需要在浏览器后台显示通知，可以使用 Web Notification API。

import React, { useEffect } from 'react';

function NotificationReminder() {
  useEffect(() => {
    if (!('Notification' in window)) {
      console.log('浏览器不支持通知');
      return;
    }

    if (Notification.permission !== 'granted') {
      Notification.requestPermission().then(permission => {
        if (permission === 'granted') {
          const timer = setTimeout(() => {
            new Notification('提醒', { body: '这是你的提醒！' });
          }, 5000);
          return () => clearTimeout(timer);
        }
      });
    } else {
      const timer = setTimeout(() => {
        new Notification('提醒', { body: '这是你的提醒！' });
      }, 5000);
      return () => clearTimeout(timer);
    }
  }, []);

  return <div>通知提醒组件</div>;
}

结合本地存储实现持久化提醒

如果需要即使页面刷新后也能继续提醒，可以结合 localStorage 存储提醒状态。

import React, { useEffect } from 'react';

function PersistentReminder() {
  useEffect(() => {
    const reminderKey = 'lastReminderTime';
    const lastReminder = localStorage.getItem(reminderKey);
    const now = Date.now();

    if (!lastReminder || now - parseInt(lastReminder) > 24 * 60 * 60 * 1000) {
      const timer = setTimeout(() => {
        alert('每日提醒！');
        localStorage.setItem(reminderKey, now.toString());
      }, 5000);

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

  return <div>持久化提醒组件</div>;
}

以上方法可以根据具体需求选择或组合使用，实现灵活的定时提醒功能。

react如何定时提醒