perguntas da entrevista do dia 09

Conte-me sobre sua compreensão do React?Quais são seus recursos?

React é uma estrutura front-end JavaScript popular para construção de interfaces de usuário. A seguir está uma compreensão do React e uma introdução a alguns de seus principais recursos:

1. Componentização: React divide a interface do usuário em vários componentes independentes, cada componente se concentra em completar uma função específica. Essa abordagem de desenvolvimento baseada em componentes torna o código mais modular, reutilizável e mais fácil de manter.

2. DOM virtual: React usa DOM virtual (DOM virtual) para gerenciar o estado de visualização e atualizações. Virtual DOM é uma árvore de objetos JavaScript leve que mapeia a estrutura real do DOM e executa atualizações eficientes do DOM somente quando necessário, melhorando assim o desempenho.

3. Fluxo de dados unidirecional: o React usa um mecanismo de vinculação de dados com fluxo de dados unidirecional, também conhecido como "de cima para baixo" ou "passagem pai-filho". Os dados são passados ​​do componente pai para o componente filho, e os dados do componente pai não podem ser modificados diretamente no componente filho, garantindo a previsibilidade e manutenção dos dados.

4. JSX: JSX é uma extensão de sintaxe que incorpora estruturas HTML em código JavaScript. Ela nos permite escrever código semelhante a HTML para descrever a interface do usuário de maneira declarativa. React utiliza JSX para criar componentes, tornando o código mais intuitivo e fácil de entender.

5. Ciclo de vida: os componentes do React possuem uma série de métodos de ciclo de vida, incluindo estágios como inicialização, montagem, atualização e desinstalação. Através desses métodos de ciclo de vida, podemos realizar operações lógicas em momentos específicos, como solicitação de dados, processamento de alterações de estado, etc.

6. Gerenciamento de estado: o React vem com um mecanismo de gerenciamento de estado chamado “estado”. O estado do componente é usado para armazenar e gerenciar dados privados e mutáveis. Quando o estado muda, o React irá renderizar novamente automaticamente os componentes relevantes.

7. Lista Virtual: React fornece suporte para listas virtualizadas, que podem renderizar com eficiência grandes listas de dados e renderizar apenas alguns elementos na área visível, melhorando o desempenho e a experiência do usuário.

8. Suporte da comunidade: React tem uma comunidade grande e ativa, e oficiais e terceiros fornecem documentação, ferramentas e bibliotecas ricas para apoiar o desenvolvimento, acelerando assim o desenvolvimento de aplicativos.

Resumindo, React é uma estrutura front-end poderosa e flexível que permite aos desenvolvedores construir interfaces de usuário interativas, de fácil manutenção e de alto desempenho com eficiência por meio de recursos como componentização, DOM virtual e fluxo de dados unidirecional.

Fale sobre a diferença entre Real DOM e Virtual DOM? Quais são as vantagens e desvantagens?

DOM real (DOM real) e DOM virtual (DOM virtual) são dois conceitos diferentes e têm diferenças óbvias na maneira como lidam com a renderização e atualização de páginas.

Dom real:

• Real DOM é a estrutura DOM nativa fornecida pelo navegador, que é operada por JavaScript para atualizar e alterar o conteúdo da página da web.
• Quando os elementos da página mudam, o navegador recalcula toda a árvore DOM, redesenha e reflui, o que é um processo relativamente intensivo em desempenho.
• Cada vez que o DOM for modificado, a nova renderização será acionada.Quando as operações são frequentes ou a estrutura do DOM é complexa, o desempenho será bastante afetado.

DOM virtual:

• Virtual DOM é uma estrutura DOM virtual construída pelo próprio framework React. É uma cópia leve simulada por objetos JavaScript.
• Quando os dados mudam, o React primeiro executa uma operação de atualização no DOM virtual e aplica as alterações ao DOM virtual.
• O React usará o algoritmo diff para comparar as diferenças entre o antigo e o novo DOM virtual e, em seguida, atualizará apenas a parte necessária do Real DOM, minimizando o número de operações do DOM.
• Essa otimização pode melhorar o desempenho e reduzir a sobrecarga de redesenho e refluxo do navegador. Ao mesmo tempo, como o JavaScript é executado relativamente rápido, o processo de cálculo e comparação do DOM virtual é relativamente eficiente.

vantagem:

• Otimização de desempenho: o Virtual DOM pode reduzir a sobrecarga de renderização de páginas e melhorar o desempenho geral por meio de atualizações em lote e operações DOM minimizadas.
• Eficiência de desenvolvimento: Usando o Virtual DOM, os desenvolvedores podem escrever código de maneira declarativa e focar na lógica dos componentes sem lidar manualmente com os detalhes de atualização do DOM, melhorando assim a eficiência do desenvolvimento.
• Aplicativo multiplataforma: como o Virtual DOM é implementado pelo próprio framework, o React pode ser facilmente convertido em mecanismos de renderização em outras plataformas, como o React Native.

deficiência:

• Consumo de memória: o DOM virtual precisa ocupar uma certa quantidade de memória para armazenar a árvore de objetos JavaScript. Em comparação com a operação direta do DOM real, haverá uma certa sobrecarga de memória.
• Renderização inicial demorada: o Virtual DOM requer a construção de uma árvore DOM virtual completa e a realização de uma comparação de algoritmo diff durante a renderização inicial, portanto, a velocidade de carregamento da primeira página pode ser um pouco mais lenta. Mas com atualizações incrementais subsequentes e reutilização do DOM virtual existente, o desempenho melhorará.

Resumindo, existem diferenças óbvias entre o Real DOM e o Virtual DOM na forma como as páginas são renderizadas e atualizadas. O DOM virtual depende da estrutura leve da simulação de objetos JavaScript e reduz o número de operações no DOM real por meio de algoritmos de comparação otimizados, melhorando o desempenho e a eficiência do desenvolvimento, mas também traz um certo consumo de memória e tempo de renderização inicial.

Quais são os diferentes estágios do ciclo de vida do React? Quais são os métodos correspondentes de cada estágio?

O ciclo de vida de um componente React pode ser dividido nos seguintes estágios diferentes:

1. Fase de montagem :

   • construtor: chamado quando o componente é instanciado, usado para inicializar métodos de estado e ligação.
   • getDerivedStateFromProps estático: chamado durante as fases de montagem e atualização, usado para calcular o status da atualização com base em novas propriedades.
   • render: Gere DOM virtual com base no status e nas propriedades mais recentes.
   • componentDidMount: Chamado após o componente ser montado no DOM real, geralmente usado para operações assíncronas ou obtenção de dados externos.

2. Fase de atualização :

   • getDerivedStateFromProps estático: chamado durante as fases de montagem e atualização, usado para calcular o status da atualização com base em novas propriedades.
   • shouldComponentUpdate: determina se o componente precisa ser renderizado novamente, retornando verdadeiro por padrão. A otimização do desempenho pode ser realizada comparando propriedades e status antes e depois.
   • render: Gere DOM virtual com base no status e nas propriedades mais recentes.
   • componentDidUpdate: chamado após o componente concluir a atualização, geralmente usado para lidar com operações pós-atualização, como solicitações de dados, operações DOM, etc.

3. Fase de desmontagem :

   • componentWillUnmount: Chamado quando o componente está prestes a ser removido do DOM, usado para limpar recursos e cancelar operações assíncronas.

4. Fase de tratamento de erros :

   • getDerivedStateFromError estático: chamado quando um componente filho gera um erro, usado para exibir UI alternativa e atualizar o estado do componente.
   • componentDidCatch: chamado depois que um componente filho gera um erro, usado para registrar informações de erro ou enviar relatórios de erro.

Além dos métodos acima, no React 17 e superior, alguns métodos de ciclo de vida foram marcados como obsoletos e não são recomendados para uso. Diagramas detalhados do ciclo de vida e métodos recomendados podem ser visualizados na documentação oficial do React. Vale ressaltar que a introdução dos React Hooks substituirá gradativamente o método de ciclo de vida dos componentes da classe.Recomenda-se dar prioridade ao uso de Hooks para o desenvolvimento de componentes.

Fale sobre o mecanismo de execução setState no React?

No React, setStateum método usado para atualizar o estado de um componente. Seu mecanismo de execução pode ser dividido nas seguintes etapas:

1. Mesclar atualizações: quando chamado setState, o React mescla o novo objeto de estado no estado atual do componente. Esta é uma mesclagem superficial que apenas atualiza as propriedades alteradas do objeto sem substituir completamente o estado original.
2. Prepare-se para atualização: o React marcará os componentes que precisam ser atualizados como “atualização pendente”. Esta tag é assíncrona e o React coletará os componentes que precisam ser atualizados em vez de atualizá-los imediatamente.
3. Realizar atualizações: o React realizará o processo de atualização com base nos componentes marcados. Durante esse processo, o React comparará a árvore DOM virtual anterior do componente com a árvore DOM virtual atualizada para descobrir as partes que precisam ser atualizadas.
4. Gerar atualizações: Dependendo das partes que precisam ser atualizadas, o React irá gerar uma série de operações de atualização. Estas operações descrevem como modificar o elemento DOM real para refletir o novo estado.
5. Aplicar atualizações: o React aplica essas operações de atualização a elementos DOM reais para concluir as atualizações dos componentes. Este processo é eficiente e atualiza apenas as peças que precisam ser atualizadas, e não o componente inteiro.
   Ressalta-se que setStateé assíncrono, ou seja, chamá-lo não atualiza imediatamente o componente. O React combina várias setStatechamadas consecutivas em uma única atualização e, em seguida, executa as operações de atualização em lotes para otimizar o desempenho. Se você precisar setStateobter o status atualizado imediatamente após, poderá setStatefazer isso passando uma função de retorno de chamada como o segundo parâmetro de.

Conte-me sobre sua compreensão dos componentes de classe e componentes de função no React? Qual é a diferença?

No React, podemos usar componentes de classe e componentes de função para criar componentes de UI. Eles têm algumas diferenças e cenários aplicáveis:

1. ComponentComponentes de classe: os componentes de classe são criados herdando as classes base do React . Os componentes da classe usam a sintaxe da classe ES6 para definir seus próprios métodos de estado e ciclo de vida. Em um componente de classe, você pode usar rendero método para retornar o elemento JSX a ser renderizado.
2. Componentes de função: os componentes de função são criados usando funções puras. Os componentes de função simplesmente recebem um objeto de propriedades como entrada e retornam o elemento JSX a ser renderizado. Os componentes funcionais não possuem estado próprio nem métodos de ciclo de vida. Ele apenas recebe os dados e os renderiza na UI.
   a diferença:

• Sintaxe: os componentes de classe usam sintaxe de classe, enquanto os componentes de função são criados usando funções puras.
• Gerenciamento de estado: os componentes da classe podem definir seu próprio estado e setStateatualizá-lo por meio de métodos. Os componentes de função não possuem estado próprio e normalmente dependem de propriedades passadas pelo componente pai para renderização.
• Ciclo de vida: os componentes da classe podem usar métodos de ciclo de vida, como componentDidMount, componentDidUpdateetc., para lidar com a montagem, atualização e desinstalação de componentes. Os componentes de função não possuem métodos de ciclo de vida, mas você pode usar useEffectganchos para simular alguns comportamentos do ciclo de vida.
• Desempenho: Como os componentes de classe precisam criar objetos de instância, os componentes de função são relativamente mais eficientes na execução e no uso de memória.Portanto, em cenários simples, os componentes de função são geralmente mais recomendados do que os componentes de classe.
  Após a versão 16.8 do React, o mecanismo Hooks foi introduzido, permitindo que os componentes de função tenham recursos como estado e ciclo de vida, aprimorando ainda mais a funcionalidade dos componentes de função. Portanto, os componentes de função são cada vez mais usados ​​no desenvolvimento, especialmente para cenários que requerem apenas uma renderização simples da UI.