react倒计时组件封装

import React, { Component, useEffect, useState, useRef } from 'react';
import { View, Text } from '@tarojs/components';

export default function Countime(props) {
        let { shelfTime } = props; // 组件传过来的时间戳
        const timer = useRef<any>(0);
        const [remaining, setRemaining] = useState<any>({
            day: 0,
            hour: 0,
            minute: 0,
            second: 0
    });
    useEffect(() => {
        // 清除倒计时
        return () => {
            clearInterval(timer.current);
        };
    }, []);
    useEffect(() => {
        const end = Date.parse(new Date(shelfTime).toString());
        countFun(end);
    }, []);

    function countFun (end){
        // 注意  Date.parse(new Date()) 获取是13位的时间戳;
        let now_time = Date.parse(new Date().toString());
        var remaining = end - now_time;
        timer.current = setInterval(() => {
            //防止出现负数
            if (remaining > 1000) {
                remaining -= 1000;
                let day = Math.floor(remaining / 1000 / 3600 / 24);
                let hour = Math.floor((remaining / 1000 / 3600) % 24);
                let minute = Math.floor((remaining / 1000 / 60) % 60);
                let second = Math.floor((remaining / 1000) % 60);
                setRemaining({
                    day: day,
                    hour: hour < 10 ? '0' + hour : hour,
                    minute: minute < 10 ? '0' + minute : minute,
                    second: second < 10 ? '0' + second : second
                });
            } else {
                //倒计时结束时的方法
                clearInterval(timer.current);
            }
        }, 1000);
     }

     return (
        <View className='countime-box'>
            {remaining.day}天 { remaining.hour}:{remaining.minute}:   {remaining.second}
        </View>
    )
}