O uso de um aplicativo móvel deve ser uma experiência agradável, sem atrasos frustrantes. Como um desenvolvedor React Native, é crucial que você otimize seus aplicativos, para que funcionem bem e sejam fáceis de usar. O desempenho máximo do aplicativo exige que você escreva um código limpo e eficiente usando as ferramentas e bibliotecas certas.
Dê uma olhada nessas dicas e técnicas para otimizar o desempenho do seu aplicativo React Native.
1. Reduza renderizações desnecessárias com useMemo Hook
O React Native renderiza componentes usando uma tecnologia Virtual DOM (VDOM). O VDOM acompanha todas as alterações no componente do aplicativo e renderiza novamente toda a hierarquia de exibição quando julgar necessário. Esse processo é caro, então você deve evitar atualizações desnecessárias no estado e props do componente.
A biblioteca React fornece a
useMemo e useCallback ganchos para resolver este problema em componentes funcionais. Você pode usar o gancho useMemo para memorizar o valor resultante de uma função JavaScript que você não deseja recalcular em cada renderização.Aqui está um exemplo de como você pode usar o useMemo gancho:
importar { useMemo } de'reagir';funçãoMeuComponente({ dados }) {
// A função computeExpensiveValue é um cálculo caro que
// não precisa ser recalculado em cada renderização.
const valorcaro = useMemo(() => computaExpensiveValue (dados), [dados]);
// O componente pode usar o valor memorizado sem recalcular
// em cada renderização.
retornar{expensiveValue}</div>;
}
Envolvendo o computaExpensiveValue função dentro do useMemo hook memoriza o resultado da função. O useMemo hook pode aceitar um segundo argumento como uma dependência. Isso significa que a função memorizada só executará ganho quando essa dependência mudar.
useCallback é similar a useMemo, mas memoriza uma função de retorno de chamada em vez de um valor. Isso pode ser útil para evitar novas renderizações desnecessárias de componentes filho acionados por uma função de retorno de chamada transmitida como um suporte.
2. Tratamento Eficaz de Dados de Estado
O gerenciamento de estado inadequado pode levar a inconsistências de dados, levando a um comportamento inesperado que pode ser difícil de rastrear e corrigir. Um bom gerenciamento de estado envolve evitar o armazenamento de dados desnecessários no estado, o que pode tornar o aplicativo mais lento e dificultar a depuração. É importante garantir que todos os estados armazenados sejam absolutamente necessários para a renderização do componente.
Outra maneira de atualizar o estado de forma eficaz é usar técnicas de imutabilidade, como o operador spread ou o Objeto.atribuir() método.
Por exemplo:
importar Reagir, { useState } de'reagir';funçãoMeuComponente() {
const [estado, setState] = useState({
contar: 0,
texto: 'Olá'
});funçãomanipularClique() {
setState(estado anterior => {
retornarObjeto.assign({}, prevState, { contagem: prevState.count + 1 });
});
}
retornar (
Neste exemplo, o manipularClique função usa o setState gancho para atualizar o estado. Ainda assim, em vez de modificar diretamente o objeto de estado, ele usa o Objeto.atribuir() para criar um novo objeto que copia o estado anterior com a propriedade count modificada. Essa abordagem permite que o DOM virtual do React renderize novamente o componente quando reconhecer que você atualizou o estado.
Você também pode usar uma biblioteca de gerenciamento de estado como Redux e a API de contexto integrada para implementar esta técnica.
3. Implemente um sistema de monitoramento de desempenho
Os sistemas de monitoramento de desempenho de aplicativos móveis (PMS) são ferramentas que permitem medir e analisar o desempenho de seus aplicativos móveis. Eles fornecem recursos como monitoramento em tempo real, relatórios de falhas, monitoramento de rede, métricas de desempenho e reprodução de sessão do usuário. O uso de um sistema de monitoramento de desempenho com seu aplicativo React Native permitirá que você identifique gargalos de desempenho para corrigir e dimensionar seu aplicativo.
Aqui está uma lista de várias ferramentas PMC disponíveis.
- React Native Debugger: um aplicativo independente que permite depurar e inspecionar o estado do seu aplicativo React Native. Ele também inclui um monitor de desempenho para ajudá-lo a identificar e corrigir problemas de desempenho.
- React Native Profiler: Esta ferramenta integrada de monitoramento de desempenho permite que você observe o desempenho do seu aplicativo medindo o tempo que leva para renderizar cada componente.
- Flipper: uma plataforma de desenvolvimento de aplicativos móveis com um monitor de desempenho que pode ajudá-lo a identificar e corrigir problemas de desempenho.
- Monitoramento de desempenho do Firebase: uma ferramenta de monitoramento de desempenho fornecida pelo Firebase que permite acompanhar o desempenho do seu aplicativo em diferentes dispositivos e plataformas.
4. Remover declarações do Console.log
Quando uma instrução console.log é executada, ela envia uma mensagem ao mecanismo JavaScript para registrar a mensagem no console. O mecanismo JS leva tempo para processar e exibir a mensagem.
Demasiadas instruções de console em seu código retardarão sua execução e causarão atrasos no desempenho. Isso pode ser especialmente problemático quando seu aplicativo é executado em um dispositivo com recursos limitados, como um dispositivo móvel de baixo custo.
5. Crie um sistema de navegação eficiente
Um bom sistema de navegação melhorará a estrutura geral do seu aplicativo React Native, facilitando a manutenção, atualização de recursos e transmissão de dados de estado com eficiência. Além disso, facilita muito a alternância entre vários monitores em seu aplicativo, melhorando a experiência do usuário.
Você deve considerar fatores como o padrão de navegação correto (baseado em guias, baseado em pilha, baseado em gaveta etc.) para se adequar ao seu aplicativo. Leve em consideração o número de telas que você espera em seu aplicativo e como você passará os dados de estado entre elas.
O armazenamento em cache é um método útil para desenvolver um sistema de navegação confiável. O armazenamento em cache permite que você salve o estado de uma tela ou componente quando o usuário sai dele e, em seguida, restaure-o quando ele retorna. Isso ajuda a minimizar a quantidade de dados que você precisa carregar e o número de vezes que precisa renderizar novamente.
O React Native possui diversas bibliotecas disponíveis para navegação, como React Navigation e React Native Navigation. Você pode usá-los para implementar alguns desses padrões de navegação comuns em seu aplicativo.
6. Reduza o tamanho do aplicativo com divisão de código e carregamento lento
O tamanho do aplicativo é importante para o desempenho otimizado porque pode afetar aspectos da experiência do usuário, como tempo de carregamento inicial, uso de memória e espaço de armazenamento.
A divisão de código e o carregamento lento são técnicas que podem reduzir o tamanho do seu aplicativo React Native e melhorar o desempenho.
A divisão de código é o processo de dividir uma grande base de código JavaScript em "pacotes" menores e mais gerenciáveis. Isso pode reduzir significativamente o tempo de carregamento inicial do aplicativo.
O carregamento lento é uma técnica que permite carregar componentes conforme o usuário navega até eles, em vez de na inicialização. Isso pode ajudar a reduzir a quantidade de memória que seu aplicativo usa e melhorar o desempenho geral.
Por que a otimização de desempenho é importante
A otimização de desempenho é crucial para o sucesso de qualquer aplicativo móvel. Um aplicativo lento pode levar a uma experiência de usuário insatisfatória e, por fim, resultar em baixo engajamento e retenção.
Esses truques são apenas algumas maneiras que você pode utilizar para garantir uma experiência agradável para a base de usuários do seu aplicativo.