Perguntas de entrevista clássicas do React - Componente de contagem regressiva

conversa fiada

As pessoas muitas vezes reclamam das entrevistas: " As entrevistas constroem foguetes e parafusos de trabalho. ", expressando assim a situação atual de que o conteúdo do trabalho e os requisitos de habilidade não são correspondidos.

Não é descartado que algumas empresas queiram explorar o limite superior técnico ou a capacidade técnica abrangente dos candidatos, na esperança de obter um talento mais escalável. Existem também algumas empresas que não sabem como selecionar candidatos, então encontraram algumas perguntas de entrevistas online, vários princípios e detalhes. Não é que essas coisas sejam ruins, mas acho que a primeira coisa a verificar é se o candidato está qualificado para a vaga, ao mesmo tempo, se ele conseguir entender os princípios e os detalhes, será a cereja do bolo.

Depois que o bate-papo terminar, acho que posso examinar a capacidade real do React: como implementar um componente de contagem regressiva .

Componente de contagem regressiva - descrição do requisito:

Escreva um componente funcional CountDownque defina uma propriedade que passa no valor máximo, decrementando-o em um a cada segundo até chegar a 0.

pergunta

1. Como projetar.

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. E se eu quiser redefinir a contagem depois que o pai foi alterado prop?

Vamos usar outro useEffectpara processamento:

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. setTimeoutComo podemos lidar com o possível vazamento de memória?

Processado pela useEffectfunção return.

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

finalmente

Um componente simples ainda contém muitos pontos de conhecimento, que podem não apenas testar a capacidade técnica básica do candidato, mas também testar sua capacidade de raciocínio lógico.

É tudo uma merda.

Obrigado~