react hooks 封装一个countDown 倒计时组件

以下是一个使用React Hooks封装的简单倒计时组件的例子：

import React, { useState, useEffect } from 'react';
 
const CountDown = ({ initialSeconds, onComplete }) => {
  const [seconds, setSeconds] = useState(initialSeconds);
 
  useEffect(() => {
    const intervalId = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds - 1);
 
      if (seconds === 0) {
        clearInterval(intervalId);
        onComplete && onComplete();
      }
    }, 1000);
 
    return () => clearInterval(intervalId);
  }, [seconds, onComplete]);
 
  return <div>倒计时: {seconds} 秒</div>;
};
 
export default CountDown;

使用该组件时，你可以这样做：

import React from 'react';
import CountDown from './CountDown';
 
const App = () => {
  const handleComplete = () => {
    alert('倒计时结束！');
  };
 
  return (
    <div>
      <CountDown initialSeconds={10} onComplete={handleComplete} />
    </div>
  );
};
 
export default App;

这个组件接收initialSeconds作为初始秒数和一个onComplete回调函数，该函数在倒计时结束时被调用。使用useEffect来处理间隔的设置和清除，确保当秒数减到0时清除间隔，并且在组件卸载时也清除间隔。