快捷導(dǎo)航

React經(jīng)典面試題之倒計(jì)時(shí)組件詳解

更新時(shí)間：2022年03月30日 09:57:57 作者：lucasFu

這些天也都在面試,面試的內(nèi)容也大多千篇一律,無(wú)外乎vue、react這些框架的一些原理,和使用方法,但是也遇到些有趣的題目,這篇文章主要給大家介紹了關(guān)于React經(jīng)典面試題之倒計(jì)時(shí)組件的相關(guān)資料,需要的朋友可以參考下

閑聊

關(guān)于面試大家常常吐槽：“面試造火箭，工作擰螺絲。”，從而表達(dá)了對(duì)工作內(nèi)容和能力要求匹配不一的現(xiàn)狀。

不排除有些公司想要探查候選人的技術(shù)上限或者說(shuō)綜合技術(shù)能力，希望得到一個(gè)可拓展性更高的人才。也有些公司是不知道如何篩選候選人，所以隨便找了一些網(wǎng)上的面試題，各種原理，細(xì)枝末節(jié)的東西。不是說(shuō)這些東西不好，但我覺(jué)得首要考察候選人是否能夠勝任該崗位，同時(shí)他如果能懂原理，還有細(xì)節(jié)，那自然是錦上添花。

閑話聊完了，關(guān)于React我覺(jué)得能考察實(shí)際能力一道題：怎么實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)組件。

倒計(jì)時(shí)組件——需求描述：

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

問(wèn)題

怎么設(shè)計(jì)。

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

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

我們?cè)儆靡粋€(gè)useEffect去進(jìn)行處理：

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

setTimeout可能會(huì)造成內(nèi)存泄露我們?cè)趺刺幚砟兀?/li>

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

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