2. 尝试使用React Hooks重写【倒计时】组件（Hooks版本）

/* 
endTime: 目标时间，格式为时间戳
endTimeUp: 倒计时结束的回调
 */
export const CountDown = ({ endTime, endTimeUp }) => {
    const [day, setDay] = useState(0)
    const [hour, setHour] = useState(0)
    const [minute, setMinute] = useState(0)
    const [second, setSecond] = useState(0)

    useEffect(() => {
        let sys_second = (endTime - new Date().getTime());
        const timerId = setInterval(() => {
            //防止倒计时出现负数
            if (sys_second > 1000) {
                sys_second -= 1000;
                let day = Math.floor((sys_second / 1000 / 3600) / 24);
                let hour = Math.floor((sys_second / 1000 / 3600) % 24);
                let minute = Math.floor((sys_second / 1000 / 60) % 60);
                let second = Math.floor(sys_second / 1000 % 60);
                setDay(day);
                setHour(hour < 10 ? "0" + hour : hour);
                setMinute(minute < 10 ? "0" + minute : minute);
                setSecond(second < 10 ? "0" + second : second);
            } else {
                clearInterval(timerId);
                //倒计时结束时触发方法
                !!endTimeUp && endTimeUp();
            }
        }, 1000);
        return () => {  //返回一个回调函数用来清除定时器
            clearInterval(timerId)
        };
    }, [endTime]);

    return (
        <span class='count-down'>
            <span class='red'>{day}</span>
            <span class='time'>天</span>
            <span class='red'>{hour}</span>
            <span class='time'>小时</span>
            <span class='red'>{minute}</span>
            <span class='time'>分</span>
            <span class='red'>{second}</span>
            <span class='time'>秒</span>
        </span>
    )
}