React中Hooks封装倒计时60S

倒计时60S"/>

React中Hooks封装倒计时60S

使用hooks对倒计时进行封装（TS版），结合useState，useEffect，useRef 以及定时器setInterval

1. useState对count进行数据初始化,后边结合setcount()方法对count进行修改
2. useRef是作为定时器的一个Id，便于后面清除定时器
3. 第一次的useEffect是作为定时器的启动，传入一个空数组【】，不依赖任何项，只调用一次
4. 第二次的useEffect是作为清除定时器使用，依赖于count的变化，故传入一个包含count的数组

import {useState,useEffect,useRef} from 'react'export default function useTimes(start:number) {const [count,setcount] =useState(start)const timerRef=useRef<NodeJS.Timer>()useEffect(()=>{timerRef.current=setInterval(()=>{setcount(c=>c-1)},1000)//清除副作用return ()=>{clearInterval(timerRef.current)}},[])useEffect(()=>{if(count===0){clearInterval(timerRef.current)}},[count])return count
}