Questions d'entretien React Classic - Composant de compte à rebours

banalités

Les gens se plaignent souvent des entretiens : " Les entretiens construisent des fusées, et travaillent des vis. ", exprimant ainsi la situation actuelle selon laquelle le contenu du travail et les exigences en matière de capacités ne correspondent pas.

Il n'est pas exclu que certaines entreprises veuillent explorer la limite supérieure technique ou la capacité technique globale des candidats, espérant obtenir un talent plus évolutif. Certaines entreprises ne savent pas non plus comment sélectionner les candidats. Elles ont donc simplement trouvé des questions d'entretien en ligne, divers principes et détails. Ce n'est pas que ces choses soient mauvaises, mais je pense que la première chose à vérifier est si le candidat est qualifié pour le poste, en même temps, s'il peut comprendre les principes et les détails, ce sera la cerise sur le gâteau.

Une fois le chat terminé, je pense que je peux examiner la capacité réelle de React : comment implémenter un composant de compte à rebours .

Composant de compte à rebours - description de l'exigence :

Écrivez un composant fonctionnel CountDownqui définit une propriété qui transmet la valeur maximale, en la décrémentant de un toutes les secondes jusqu'à ce qu'elle atteigne 0.

question

1. Comment concevoir.

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
复制代码

2. Que se passe-t-il si je veux réinitialiser le compte après que le parent ait changé prop?

Utilisons-en un autre useEffectpour le traitement :

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 <h1>{count}</h1>
}

export default CountDown
复制代码

3. setTimeoutComment pouvons-nous gérer l'éventuelle fuite de mémoire ?

Traité par useEffectla fonction de retour.

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 <h1>{count}</h1>
}

export default CountDown
复制代码

finalement

Un composant simple contient encore beaucoup de points de connaissance, qui peuvent non seulement tester la capacité technique de base du candidat, mais aussi tester sa capacité de réflexion logique.

C'est de la merde.

Merci ~