当前位置：首页 > React

react如何定时提醒

2026-03-31 02:24:34React

使用 `setInterval` 实现定时提醒

在 React 中，可以通过 setInterval 创建一个定时器，定期触发提醒功能。需要在组件卸载时清除定时器以避免内存泄漏。

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

function Reminder() {
  const [timeLeft, setTimeLeft] = useState(10); // 10秒倒计时

  useEffect(() => {
    const timer = setInterval(() => {
      setTimeLeft((prev) => {
        if (prev <= 1) {
          alert('时间到！');
          clearInterval(timer);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

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

  return <div>剩余时间：{timeLeft}秒</div>;
}

export default Reminder;

使用 `setTimeout` 实现单次提醒

如果只需要单次提醒，可以使用 setTimeout 替代 setInterval。

import React, { useEffect } from 'react';

function SingleReminder() {
  useEffect(() => {
    const timer = setTimeout(() => {
      alert('提醒时间到！');
    }, 5000); // 5秒后提醒

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

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

export default SingleReminder;

结合浏览器通知 API 增强提醒

使用浏览器的 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') {
          new Notification('提醒已启用', {
            body: '将在5秒后提醒您',
          });
        }
      });
    }

    const timer = setTimeout(() => {
      new Notification('时间到！', {
        body: '您的任务已完成',
      });
    }, 5000);

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

  return <div>系统通知将在5秒后触发</div>;
}

export default NotificationReminder;

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

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('任务已完成！', {
        position: 'top-right',
        autoClose: 3000,
      });
    }, 3000);

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

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

export default ToastReminder;