ts+hooks实现倒计时组件
时间: 2023-12-09 14:03:19 浏览: 34
以下是使用 TypeScript 和 React Hooks 实现的简单倒计时组件:
```typescript
import React, { useState, useEffect } from "react";
interface CountdownProps {
targetDate: Date;
}
const Countdown: React.FC<CountdownProps> = ({ targetDate }) => {
const [days, setDays] = useState(0);
const [hours, setHours] = useState(0);
const [minutes, setMinutes] = useState(0);
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
const now = new Date();
const diff = targetDate.getTime() - now.getTime();
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((diff / (1000 * 60)) % 60);
const seconds = Math.floor((diff / 1000) % 60);
setDays(days);
setHours(hours);
setMinutes(minutes);
setSeconds(seconds);
}, 1000);
return () => clearInterval(intervalId);
}, [targetDate]);
return (
<div>
<div>{days} days</div>
<div>{hours} hours</div>
<div>{minutes} minutes</div>
<div>{seconds} seconds</div>
</div>
);
};
export default Countdown;
```
在这个组件中,我们使用了 `useState` 和 `useEffect` Hooks 来管理组件的状态和生命周期。每次渲染时都会计算倒计时的时间差并更新状态。当组件被卸载时,我们也使用了 `useEffect` Hook 来清除定时器,以免造成内存泄漏。