欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

閑聊

關(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方式

    這篇文章主要介紹了react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • 深入淺析React中diff算法

    深入淺析React中diff算法

    React 最為核心的就是 Virtual DOM 和 Diff 算法,diff算法的基礎(chǔ)是Virtual DOM,接下來通過本文給大家介紹React中diff算法的相關(guān)知識(shí),對(duì)React中diff算法感興趣的朋友跟隨小編一起學(xué)習(xí)下吧
    2021-05-05
  • 從零開始搭建webpack+react開發(fā)環(huán)境的詳細(xì)步驟

    從零開始搭建webpack+react開發(fā)環(huán)境的詳細(xì)步驟

    這篇文章主要介紹了從零開始搭建webpack+react開發(fā)環(huán)境的詳細(xì)步驟,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-05-05
  • ReactJs快速入門教程(精華版)

    ReactJs快速入門教程(精華版)

    React 起源于 Facebook 的內(nèi)部項(xiàng)目,因?yàn)樵摴緦?duì)市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套,用來架設(shè) Instagram 的網(wǎng)站.這篇文章主要介紹了ReactJs快速入門教程(精華版)的相關(guān)資料,需要的朋友可以參考下
    2016-11-11
  • react使用axios實(shí)現(xiàn)上傳下載功能

    react使用axios實(shí)現(xiàn)上傳下載功能

    這篇文章主要為大家詳細(xì)介紹了react使用axios實(shí)現(xiàn)上傳下載功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-08-08
  • 淺談react.js 之 批量添加與刪除功能

    淺談react.js 之 批量添加與刪除功能

    下面小編就為大家?guī)硪黄獪\談react.js 之 批量添加與刪除功能。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-04-04
  • React?路由使用示例詳解

    React?路由使用示例詳解

    這篇文章主要介紹了React?路由使用,使用路由時(shí)需要為組件指定一個(gè)路由的path,最終會(huì)以path為基礎(chǔ),進(jìn)行頁面的跳轉(zhuǎn),具體使用先看個(gè)簡單示例,該示例比較簡單就是兩個(gè)Tab頁面的來回切換
    2022-05-05
  • React組件的生命周期詳解

    React組件的生命周期詳解

    React是用于構(gòu)建用戶界面的JavaScript庫。本文詳細(xì)講解了React的生命周期,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-03-03
  • React Render Props共享代碼技術(shù)

    React Render Props共享代碼技術(shù)

    render props是指一種在 React 組件之間使用一個(gè)值為函數(shù)的 prop 共享代碼的技術(shù)。簡單來說,給一個(gè)組件傳入一個(gè)prop,這個(gè)props是一個(gè)函數(shù),函數(shù)的作用是用來告訴這個(gè)組件需要渲染什么內(nèi)容,那么這個(gè)prop就成為render prop
    2023-01-01
  • React18的useEffect執(zhí)行兩次如何應(yīng)對(duì)

    React18的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

最新評(píng)論