React經(jīng)典面試題之倒計時組件詳解
閑聊
關(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ù)能力,還能考察他的一個邏輯思維能力。
到此這篇關(guān)于React經(jīng)典面試題之倒計時組件的文章就介紹到這了,更多相關(guān)React倒計時組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react?umi?刷新或關(guān)閉瀏覽器時清除localStorage方式
這篇文章主要介紹了react?umi?刷新或關(guān)閉瀏覽器時清除localStorage方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟
這篇文章主要介紹了從零開始搭建webpack+react開發(fā)環(huán)境的詳細步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05React18的useEffect執(zhí)行兩次如何應(yīng)對
這篇文章主要給大家介紹了關(guān)于React18的useEffect執(zhí)行兩次如何應(yīng)對的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用React具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07