下载：Java工程师高薪训练营爱分享ZY：https://www.zxit666.com/4236/ReactClassic面试题-倒计时组件聊聊关于面试，大家经常抱怨：“面试造火箭，工作变螺丝”。这表达了工作内容与人才需求不匹配的现状。不排除有一些企业想探索应聘者的技术上限或综合技术能力，希望得到一个具有更高扩展性的人才。也有一些公司不知道怎么选人，就随便在网上找了一些面试题，各种原理，各种鸡毛蒜皮的东西。并不是说这些东西不好，但我觉得首先要考察的是应聘者是否能胜任这个职位。同时，若是能够领悟其中的原理和细节，自然会如虎添翼。八卦完了，想到React，只能调查实践一个问题：如何完成一个倒计时组件。倒计时组件-需求描述：写一个功能组件CountDown，设置一个属性，传入最大值，每秒递减1，直到为0。题目是怎么设计的。import{useState}from"react"functionCountDown({max=10}){const[count,setCount]=useState(max)useEffect(()=>{if(count>0){setTimeout(()=>{setCount(count-1)},1000)}})return{count}}exportdefaultCountDown复制代码如果我想在父更改prop后重置计数怎么办？让我们使用另一个useEffect来处理：import{useState}from"react"functionCountDown({max=10}){const[count,setCount]=useState(max)//倒计时逻辑useEffect(()=>{if(count>0){setTimeout(()=>{setCount(count-1)},1000)}})//重置计数useEffect(()=>{setCount(max)},[max])return

{count}

}exportdefaultCountDownCopycodeCopycodesetTimeout可能会导致内存泄漏，我们该如何处理呢？由useEffect的返回函数处理。import{useState}from"react"functionCountDown({max=10}){const[count,setCount]=useState(max)//倒计时逻辑useEffect(()=>{lettimer=null;if(count>0){timer=setTimeout(()=>{setCount(count-1)},1000)}return()=>{clearTimeout(timer)}})//重置计数useEffect(()=>{setCount(max)},[max])return

{count}

}exportdefaultCountDown复制代码复制代码最后一个简单的组件还是包含了很多知识点，既要观察考生的基本技术能力，又要考察一个他的逻辑思维天赋。