实现n秒倒计时，初始显示你（来自props），每秒递减1，到0时停止倒计时，并显示“活动开始”， 倒计时kook返回pause，start，reset，time，分别表明：暂停，开始，重置，剩余时间 使用函数组件+自定义hooks实现 使用ts编写

在React中，我们可以使用函数组件结合自定义Hook来实现这个功能。首先，创建一个名为`useCountdown`的自定义Hook，它会处理倒计时的状态以及控制逻辑。以下是基本的代码实现：

import { useState, useEffect } from 'react';

// 自定义Hook
const useCountdown = (initialTime: number) => {
  const [countdown, setCountdown] = useState(initialTime);
  const [isRunning, setIsRunning] = useState(true);

  // 停止更新并设置为0表示倒计时结束
  const handleStop = () => {
    if (countdown > 0) {
      setIsRunning(false);
      setTimeout(() => setCountdown(0), 1000); // 立即停止计时器并切换至"活动开始"
    }
  };

  // 每秒递减计数
  useEffect(() => {
    if (isRunning && countdown > 0) {
      setCountdown((prevCountdown) => prevCountdown - 1);
    }
    return () => handleStop(); // 组件卸载时停止倒计时
  }, [countdown, isRunning]);

  // 返回倒计时状态和操作方法
  const actions = {
    pause: () => setIsRunning(false),
    start: () => setIsRunning(true),
    reset: () => setCountdown(initialTime),
    time: () => countdown,
  };

  return { countdown, pause, start, reset, time };
};

// 函数组件示例
function CountdownTimer({ initialTime }: { initialTime: number }) {
  const { countdown, pause, start, reset, time } = useCountdown(initialTime);

  return (
    <>
      <div>{countdown ? `剩下${countdown}秒` : "活动开始"}</div>
      <button onClick={pause}>暂停</button>
      <button onClick={start}>开始</button>
      <button onClick={reset}>重置 ({initialTime}秒)</button>
      <p>当前时间：{time}s</p>
    </>
  );
}

export default CountdownTimer;

在这个例子中，`useCountdown` Hook维护了倒计时的状态和是否运行的标志。当用户点击开始按钮时，`isRunning`会被设为`true`，计时器开始递减；点击暂停时，设置为`false`，计时器停止；点击重置时，`countdown`会被重置回初始值。