日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后，達者為師

網(wǎng)站首頁 編程語言 正文

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

作者：lucasFu ? 更新時間： 2022-06-01 編程語言

閑聊

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

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

閑話聊完了，關(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 <h1>{count}</h1>
}
export default CountDown
  • 如果我在父級改變了prop后要重置計數(shù)怎么做呢？

我們再用一個useEffect去進行處理：

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 <h1>{count}</h1>
}
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 <h1>{count}</h1>
}
export default CountDown

最后

一個簡簡單單的組件還是包含了很多知識點的，不僅能夠考察候選人的基礎(chǔ)技術(shù)能力，還能考察他的一個邏輯思維能力。

原文鏈接：https://juejin.cn/post/7080388529355767821

欄目分類
最近更新