制作一个 React 倒计时组件

倒计时组件在网页应用中的应用广泛，它可以用于各种场景，如倒计时到特定事件的开始、产品促销的截止时间、或者简单的时间追踪。本文将指导你如何在 React 中实现这样一个组件，并介绍一些优化策略来提升组件的性能和用户体验。

组件功能

我们的倒计时组件需要满足以下功能：

接收一个未来的时间点：组件通过 props 接收一个未来的时间点，这个时间点是一个标准的日期时间字符串，例如 '2024-01-30T15:00:00'。
实时更新显示：组件需要每秒更新一次，计算并显示从当前时间到目标时间的剩余时间。
格式化显示：显示的时间需要格式化为「x 时 x 分 x 秒」的形式。
活动开始提示：当时间到达或者过了目标时间点时，组件应显示“活动已开始”。

基础实现

首先，我们来看一个简单的实现示例，这个组件使用了 React 的 useState 和 useEffect 钩子：

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

function CountdownTimer({ targetDate }) {
  const [timeLeft, setTimeLeft] = useState('');

  useEffect(() => {
    const interval = setInterval(() => {
      const now = new Date();
      const target = new Date(targetDate);
      const difference = target - now;

      if (difference > 0) {
        const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
        const minutes = Math.floor((difference / 1000 / 60) % 60);
        const seconds = Math.floor((difference / 1000) % 60);
        setTimeLeft(`${hours} 时 ${minutes} 分 ${seconds} 秒`);
      } else {
        setTimeLeft('活动已开始');
        clearInterval(interval);
      }
    }, 1000);

    return () => clearInterval(interval);
  }, [targetDate]);

  return <div>距离活动开始还有 {timeLeft}</div>;
}

export default CountdownTimer;

进阶优化

为了提升组件的性能和功能，我们可以进行以下几点优化：

使用日期库：引入 date-fns 这样的库可以帮助我们更准确和简单地处理时间计算和格式化。
减少不必要的渲染：通过优化状态更新逻辑，减少组件的不必要渲染，例如仅在时间的某个组成部分（如分钟或秒）变化时才更新状态。
时区处理：考虑时区问题，确保组件在不同地区也能正确显示时间。
有效性检查：增加对 targetDate 的有效性检查，避免因格式错误引起的问题。

使用 `date-fns` 优化

我们可以使用 date-fns 来简化时间的处理，这是更新后的组件代码：

import React, { useState, useEffect } from 'react';
import { format, differenceInSeconds } from 'date-fns';

function CountdownTimer({ targetDate }) {
  const calculateTimeLeft = () => {
    const now = new Date();
    const target = new Date(targetDate);
    const difference = differenceInSeconds(target, now);

    if (difference > 0) {
      const hours = Math.floor(difference / 3600);
      const minutes = Math.floor((difference % 3600) / 60);
      const seconds = difference % 60;
      return `${hours} 时 ${minutes} 分 ${seconds} 秒`;
    } else {
      return '活动已开始';
    }
  };

  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeLeft(calculateTimeLeft());
    }, 1000);

    return ()

 => clearInterval(interval);
  }, [targetDate]);

  return <div>距离活动开始还有 {timeLeft}</div>;
}

export default CountdownTimer;

制作一个 React 倒计时组件

组件功能

基础实现

进阶优化

使用 date-fns 优化

使用 `date-fns` 优化