React中无需setInterval与用户交互，定时触发useEffect更新时间文本

你的当前方案用每秒轮询的方式确实会造成不必要的性能消耗，而且useEffect的依赖设置也有问题（myText和localTime作为依赖会导致组件频繁重渲染）。这里有个更高效的实现思路：计算下一次需要切换文本的精确时间点，只在那个时间点触发更新，而非每秒检查。

具体实现步骤 #

1. 编写工具函数，根据当前时间判断应显示的文本，同时计算出下一次切换需要等待的毫秒数。
2. 组件初始化时计算初始文本，设置定时器到下一个切换点，触发更新后再重新计算下一个定时器，以此循环。

优化后的代码 #

import { useState, useEffect } from 'react';

export const Greeting = () => {
  const [greetingText, setGreetingText] = useState('');

  // 计算当前问候语和下一次切换的等待时间
  const calculateGreeting = () => {
    const now = new Date();
    const hours = now.getHours();
    let nextSwitchMs = 0;
    let text = '';

    if (hours >= 1 && hours < 12) {
      text = 'Morning';
      // 计算到当天12点的毫秒数
      const nextNoon = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 12, 0, 0);
      nextSwitchMs = nextNoon.getTime() - now.getTime();
    } else if (hours >= 12 && hours < 17) {
      text = 'Afternoon';
      // 计算到当天17点的毫秒数
      const nextEvening = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 17, 0, 0);
      nextSwitchMs = nextEvening.getTime() - now.getTime();
    } else {
      // 可补充晚上的逻辑，比如显示"Evening"或"Night"
      text = 'Evening';
      // 计算到第二天1点的毫秒数
      const nextMorning = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 1, 0, 0);
      nextSwitchMs = nextMorning.getTime() - now.getTime();
    }

    setGreetingText(text);
    return nextSwitchMs;
  };

  useEffect(() => {
    let timerId;
    const setupTimer = () => {
      const nextMs = calculateGreeting();
      // 设置下一次切换的定时器
      timerId = setTimeout(setupTimer, nextMs);
    };

    // 初始化执行一次
    setupTimer();

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

  return <h1>{greetingText}</h1>;
};

方案优势 #

• 性能更优：不再每秒触发检查，只在真正需要切换的时间点更新组件，避免不必要的重渲染和定时器调用。
• 逻辑更清晰：把问候语计算和定时器逻辑拆分，代码可读性更强。
• 无冗余依赖：useEffect只在组件初始化时执行一次，不会因为状态变化重复触发。

内容的提问来源于stack exchange，提问作者HackerMan33453