React经典面试题-倒计时组件

React经典面试题-倒计时组件

闲谈

关于面试大家常常吐槽:“面试造火箭,工作拧螺丝。”,从而表达了对工作内容和才能请求匹配不一的现状。

不扫除有些公司想要探查候选人的技术上限或者说综合技术才能,希望得到一个可拓展性更高的人才。也有些公司是不晓得如何挑选候选人,所以随意找了一些网上的面试题,各种原理,细枝末节的东西。不是说这些东西不好,但我觉得首要调查候选人能否可以胜任该岗位,同时他假如能懂原理,还有细节,那自然是如虎添翼。

闲话聊完了,关于React我觉得能调查实践才能一道题:怎样完成一个倒计时组件。

倒计时组件——需求描绘:

写一个函数式组件CountDown,设置一个传入最大值的属性,每一秒减一,直到为0。

**问题
怎样设计。**

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

{count}

} export default CountDown

复制代码
**假如我在父级改动了prop后要重置计数怎样做呢?
我们再用一个useEffect去停止处置:**

import { useState } from "react"
function CountDown({max = 10}){
  const [count,setCount] = useState(max)
  
  // 倒计时逻辑
  useEffect(()=>{
    if(count>0){
      setTimeout(()=>{
        setCount(count-1)
      },1000)
    }
  })
  
  // 重置计数
  useEffect(()=>{
    setCount(max)
  },[max])
  
  return 

{count}

} export default CountDown

复制代码
**setTimeout可能会形成内存泄露我们怎样处置呢?
经过useEffect的返回函数处置。**

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)
    }
  })
  
  // 重置计数
  useEffect(()=>{
    setCount(max)
  },[max])
  
  return 

{count}

} export default CountDown

复制代码

最后

一个简简单单的组件还是包含了很多学问点的,不只可以调查候选人的根底技术才能,还能调查他的一个逻辑思想才能。

你可能感兴趣的:(react.js)