React如何實現(xiàn)倒計時組件

這篇文章將為大家詳細(xì)講解有關(guān)React如何實現(xiàn)倒計時組件，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

倒計時組件——需求描述：

寫一個函數(shù)式組件CountDown，設(shè)置一個傳入最大值的屬性，每一秒減一，直到為0。

問題

• 怎么設(shè)計。

import { useState } from "react"
function CountDown({max = 10}){
  const [count,setCount] = useState(max)
    
  useEffect(()=>{
    if(count>0){
      setTimeout(()=>{
        setCount(count-1)
      },1000)
    }
  })
  return <h2>{count}</h2>
}
export default CountDown

• 如果我在父級改變了prop后要重置計數(shù)怎么做呢？

我們再用一個useEffect去進(jìn)行處理：

import { useState } from "react"
function CountDown({max = 10}){
  const [count,setCount] = useState(max)
  
  // 倒計時邏輯
  useEffect(()=>{
    if(count>0){
      setTimeout(()=>{
        setCount(count-1)
      },1000)
    }
  })
  
  // 重置計數(shù)
  useEffect(()=>{
    setCount(max)
  },[max])
  
  return <h2>{count}</h2>
}
export default CountDown

• setTimeout可能會造成內(nèi)存泄露我們怎么處理呢？

通過useEffect的返回函數(shù)處理。

import { useState } from "react"
function CountDown({max = 10}){
  const [count,setCount] = useState(max)
  
  // 倒計時邏輯
  useEffect(()=>{
    let timer = null;
    if(count>0){
      timer = setTimeout(()=>{
        setCount(count-1)
      },1000)
    }
    return ()=>{
      clearTimeout(timer)
    }
  })
  
  // 重置計數(shù)
  useEffect(()=>{
    setCount(max)
  },[max])
  
  return <h2>{count}</h2>
}
export default CountDown

關(guān)于“React如何實現(xiàn)倒計時組件”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。