Como responder às 10 perguntas mais comuns da entrevista React Local

Esse artigo foi publicado originalmente em .culto de Manusha Chethiyawardhana. .cult é uma plataforma de comunidade baseada em Berlim para desenvolvedores. Escrevemos sobre todas as coisas relacionadas à carreira, fazemos documentários originais e compartilhamos muitas outras histórias não contadas de desenvolvedores de todo o mundo.

Então você está se preparando para sua próxima entrevista de desenvolvimento móvel? Assumindo que a empresa está trabalhando com o standard aplicativo móvel quadro de desenvolvimento, Reagir nativovocê está no lugar certo.

O entrevistador vai testar seus conhecimentos sobre React Local, então vamos ter certeza de que você está preparado para qualquer pergunta que venha em seu caminho. Neste artigo, vou passar por algumas das perguntas mais comuns de entrevista React Local e fornecer as respostas para que você possa demonstrar com confiança seu conhecimento da estrutura.

1. Por que usar React Local sobre outros frameworks?

O React Local é um framework multiplataforma. O uso de um único base de código para duas plataformas (iOS e Android) economiza pace e dinheiro, que talvez seja a razão mais óbvia para usar o React Local. No entanto, não é a única especialidade do React Local.

Você pode demonstrar seu profundo conhecimento do React Local explicando os seguintes motivos.

Experiência nativa

A provisão de experiência Local é o melhor recurso do React Local, em oposição à estrutura móvel Ionic. Porque Iônico é construído em cima do navegador da internet, o código do aplicativo não pode acessar facilmente as funcionalidades nativas. O Ionic america HTML/CSS, permitindo que você chame aplicativos nativos; no entanto, a suavidade das funções básicas, como teclado, mapas, navegação, câmera e assim por diante, não pode ser garantida.

O React Local, por outro lado, interage diretamente com widgets de UI nativos em vez de usar o Internet View Element ou fazer chamadas para aplicativos nativos pré-existentes por meio de código HTML ou criar réplicas de aplicativos nativos.

Flexibilidade

O React Local não o vincula apenas ao seu código. O React Local permite gerar código específico da plataforma no Xcode se você quiser codificar nativamente no Swift. Você pode usar o React Local para compilar um aplicativo iOS nativo e programar recursos diretamente no iOS usando Swift ou Purpose-C para implementar recursos que não estão disponíveis no React Local ou são mais fáceis de implementar no iOS.

O React Local também é compatível com plugins de terceiros, tornando-o ainda mais flexível. Você pode acelerar ainda mais o processo de desenvolvimento usando bibliotecas de código aberto de componentes pré-criados. Como a vinculação de ponte cruzada não é necessária e a maior parte do código é usada durante o pace de execução, ela também não consome muito espaço de memória.

Understand atualizações ao vivo sem a aprovação da App Retailer

Aguardar as aprovações da App Retailer para atualizações pode levar muito pace. O React Local permite que você atualize remotamente a base de código do seu aplicativo by the use of CodePush do Microsoft App Middle, em vez de passar por todo o processo de enviar a versão atualizada do seu aplicativo para a App Retailer e aguardar a aprovação, como faria com os frameworks como Flutter.

2. Quais são os componentes básicos usados ​​em um aplicativo React Local?

A maioria dos aplicativos React Local usará pelo menos um dos seguintes componentes básicos, que todo desenvolvedor React Local encontrará.

Visualizar — O componente mais básico para criar uma interface do usuário React Local. O View suporta format com flexbox, estilo, algum manuseio de toque e controles de acessibilidade.

Texto — Um componente React para exibir texto que também suporta aninhamento, estilo e manipulação de toque.

Imagem — Um componente React para exibir vários tipos de imagens, incluindo imagens do rolo da câmera.

ScrollView — Um contêiner de rolagem que pode conter vários componentes e visualizações.

TextInput — O componente básico para inserir texto no aplicativo usando um teclado.

Folha de estilo — StyleSheet é uma abstração semelhante a CSS StyleSheets que permite definir estilos para vários contêineres.

3. Qual é a diferença entre ScrollView e FlatList?

ScrollView e FlatList são usados ​​para exibir uma lista de componentes em um aplicativo React Local. No entanto, ScrollView tem uma desvantagem de desempenho.

ScrollView irá carregar todos os itens assim que o componente for carregado. Como resultado, todos os dados são armazenados na RAM e, quanto mais dados houver, mais lento será o desempenho.

FlatList, por outro lado, renderiza itens lentamente; por padrão, ele montará 10 itens na tela e, à medida que o usuário rolar a exibição, itens adicionais serão montados.

Você pode usar ScrollView para um pequeno número de itens e FlatList para um número maior de itens.

4. Componentes de Classe vs Componentes Funcionais, o que usar?

Componentes no React podem ser criados usando categories ou funções. Anteriormente, apenas componentes de classe podiam ter estados, mas com a introdução de Hooks, agora você também pode usar state em componentes de função.

Escrevemos menos linhas de código com componentes funcionais e é muito mais fácil de ler e testar. Então, os componentes de classe ainda precisam ser usados?

Sim, pode haver momentos em que precisamos usar componentes de classe em aplicativos React Local modernos, como ao lidar com erros de JavaScript com Limites de erro porque não há nenhum Gancho de Limites de Erro introduzido ainda.

Além disso, é preferível usar componentes funcionais ao desenvolver seus aplicativos.

5. Para que serve o gancho useEffect?

Podemos realizar efeitos colaterais em componentes de função usando o gancho useEffect. Solicitações de busca, manipulações diretas do DOM e o uso de funções de timer como setTimeout() são exemplos de efeitos colaterais.

Anteriormente, esses efeitos colaterais eram obtidos por meio do uso de métodos de ciclo de vida, como componentDidMount(), componentDidUpdate() e componentWillUnmount(). useEffect Hook é uma combinação de todos esses métodos. Ele aceita uma função de retorno de chamada que é chamada sempre que ocorre uma renderização.

Por padrão, useEffect Hook é executado após a primeira renderização, bem como após cada atualização. O gancho useEffect ajuda a evitar código redundante e código relacionado ao grupo.

Considere o exemplo a seguir para entender melhor o gancho useEffect para a substituição do método de ciclo de vida componentDidMount().

6. O que é Props Drilling e como evitá-lo?

A perfuração de adereços é o processo de passar adereços de uma parte de uma árvore para outra, passando-os por outras partes que não exigem os dados, mas apenas ajudam a passá-los pela árvore.

Por exemplo, se quisermos alterar o tema do aplicativo, podemos passar uma prop de tema por todas as partes da árvore de componentes, incluindo partes que não requerem a prop.

Embora não haja nada inerentemente errado com a perfuração de props, isso complica sua aplicação desnecessariamente.

Uma das melhores maneiras de evitar o drill de props é usar a Context API. O contexto nos permite passar dados diretamente para os componentes necessários. Podemos usar o React Context para adereços como tema de interface do usuário, usuário atualmente autenticado ou idioma.

Reação do contexto

7. Como implementar Networking em React Local?

Para nossos requisitos de rede, o React Local inclui o Buscar API e a XMLHttpRequest API. A API Fetch é uma implementação JS nativa mais moderna e amigável ao desenvolvedor que facilita fazer solicitações assíncronas e lidar com respostas.

Fetch também aceita um segundo argumento opcional, que nos permite personalizar a solicitação HTTP. Por exemplo, podemos usá-lo para especificar cabeçalhos adicionais ou para fazer uma solicitação POST.

Além disso, podemos usar bibliotecas de terceiros como axios ou frisbee para implementar redes em React Local também.

8. O que é o armazenamento assíncrono e quando deve ser usado?

O Async Garage é um módulo mantido pela comunidade React Local que fornece um armazenamento de valor-chave assíncrono e não criptografado. É essencialmente a versão do React Local do armazenamento native baseado na internet.

O armazenamento assíncrono é útil quando precisamos armazenar variáveis ​​globais em todo o aplicativo, estados persistentes do GraphQL ou Redux ou quaisquer outros dados não confidenciais que desejamos manter mesmo depois que o usuário fecha o aplicativo.

Como o Armazenamento Async só pode armazenar dados de string, os dados do objeto devem ser serializados antes de serem armazenados.

Além disso, não devemos armazenar dados confidenciais, como tokens, em armazenamento assíncrono, nem devemos armazenar grandes quantidades de dados.

Github — Armazenamento assíncrono reage nativo

9. Por que as animações em React Local são tão suaves?

Reagir nativos API animada foi projetado para ser serializável, permitindo que os usuários enviem animações para nativos sem precisar passar pela ponte em cada quadro.

Assim que a animação começar, o thread JS pode ser bloqueado e, como o código é convertido em visualizações nativas antes da renderização, as animações continuarão a ser executadas sem problemas.

Antes de serem executados, certos tipos de animação, como Animated.timing e Animated.spring, podem ser serializados e enviados pela ponte assíncrona.

Animações – React Local

10. Como depurar aplicativos React Local?

Muitas ferramentas de depuração estão disponíveis para depurar nossos aplicativos React Local, graças a um grande número de colaboradores do React Local.

Chrome DevTools é a maneira mais simples de depurar seu código sem instalar nenhum aplicativo adicional. O React Local, por padrão, oferece suporte às ferramentas ChromeDev por meio de seu recurso de depuração remota.

Ao depurar com React DevToolsvocê pode depurar a hierarquia do componente, bem como selecionar e editar as props ou o estado atual do componente.

Se você estiver usando o Redux em seu aplicativo React Local, o melhor depurador a ser usado é Reagir depurador nativo. É um aplicativo de desktop que roda em Mac, Home windows e Linux e combina Redux e React DevTools em um único aplicativo. Você pode usar o React Local Debugger para registrar ou excluir o conteúdo do Armazenamento Async, inspecionar solicitações de rede e detectar e diagnosticar problemas de desempenho.

Pensamentos finais

Embora existam muitas perguntas de entrevista diferentes que você pode fazer sobre o React Local, acho que essas dez mencionadas acima cobrem os tópicos mais comuns. Então leia as respostas novamente e certifique-se de estar preparado para sua próxima entrevista React Local.

Se você achou essas perguntas úteis, entre em contato para que possamos criar outra lista de perguntas mais avançadas! Enquanto isso, proceed aprendendo e abrindo caminho para o seu sonho.

Obrigado por ler e boa codificação!