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