React經(jīng)典面試題之倒計(jì)時(shí)組件詳解
閑聊
關(guān)于面試大家常常吐槽:“面試造火箭,工作擰螺絲。”,從而表達(dá)了對(duì)工作內(nèi)容和能力要求匹配不一的現(xiàn)狀。
不排除有些公司想要探查候選人的技術(shù)上限或者說綜合技術(shù)能力,希望得到一個(gè)可拓展性更高的人才。也有些公司是不知道如何篩選候選人,所以隨便找了一些網(wǎng)上的面試題,各種原理,細(xì)枝末節(jié)的東西。不是說這些東西不好,但我覺得首要考察候選人是否能夠勝任該崗位,同時(shí)他如果能懂原理,還有細(xì)節(jié),那自然是錦上添花。
閑話聊完了,關(guān)于React我覺得能考察實(shí)際能力一道題:怎么實(shí)現(xiàn)一個(gè)倒計(jì)時(shí)組件。
倒計(jì)時(shí)組件——需求描述:
寫一個(gè)函數(shù)式組件CountDown,設(shè)置一個(gè)傳入最大值的屬性,每一秒減一,直到為0。
問題
- 怎么設(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>
通過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
最后
一個(gè)簡簡單單的組件還是包含了很多知識(shí)點(diǎn)的,不僅能夠考察候選人的基礎(chǔ)技術(shù)能力,還能考察他的一個(gè)邏輯思維能力。
到此這篇關(guān)于React經(jīng)典面試題之倒計(jì)時(shí)組件的文章就介紹到這了,更多相關(guān)React倒計(jì)時(shí)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式
這篇文章主要介紹了react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10從零開始搭建webpack+react開發(fā)環(huán)境的詳細(xì)步驟
這篇文章主要介紹了從零開始搭建webpack+react開發(fā)環(huán)境的詳細(xì)步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05react使用axios實(shí)現(xiàn)上傳下載功能
這篇文章主要為大家詳細(xì)介紹了react使用axios實(shí)現(xiàn)上傳下載功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08React18的useEffect執(zhí)行兩次如何應(yīng)對(duì)
這篇文章主要給大家介紹了關(guān)于React18的useEffect執(zhí)行兩次如何應(yīng)對(duì)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用React具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07