Java工程师高薪训练营爱分享

download:Java工程师高薪训练营爱分享

下崽ZY：https://www.zxit666.com/4236/
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
复制代码
复制代码
最后
一个简简单单的组件还是包含了很多学问点的，不只可以调查候选人的根底技术才能，还能调查他的一个逻辑思想才能。