vue实现逻辑复用可以使用 minxs

react实现逻辑复用可以使用高阶组件、render-props和hooks

/* eslint-disable @typescript-eslint/no-unused-vars */
import {useState, useEffect} from 'react'

const useCountDown = (DTime: number) => {
    const [delayTime, setDelayTime] = useState<number>(DTime);
    const [status, setStatus] = useState<boolean>(false);

    useEffect(() => {
        setTimeout(() => {
            if(delayTime > 0){
                setDelayTime(time => time - 1)
                if(delayTime === 1){
                    setStatus(true)
                }
            }
        }, 1000);
    }, [delayTime])

    return [delayTime, status];
    
}

export default useCountDown;

在组件里面的使用

/* eslint-disable @typescript-eslint/no-unused-vars */
import React, {useEffect, useState, useCallback, useContext} from 'react'
import useCountDown from '../hooks/useCountDown'

import './pages.css'

const Home = () => {
    const [dtime, status] = useCountDown(9)
    return(
        <div className='home'>
            倒计时: {dtime} 秒 <br /> 状态 {status ? '已完成' : '未完成'} 
        </div>
    )
}

export default Home;

阿里写的一些hooks ahooks