Fluxo de renderização e o algoritmo de reconciliação — React e React Native

Um dos grandes pontos fortes do React é sua capacidade de reconciliar e atualizar apenas partes específicas da interface quando necessário, calculando a diferença(diffing) entre as representações de renderizações anteriores e atuais.

React Native adota o mesmo conceito e o aplica a plataformas móveis. Nos bastidores, o algoritmo de reconciliação funciona da mesma forma.

No nosso dia a dia, é comum escutarmos:

• “O componente renderizou”
• “O estado mudou, por isso o componente renderizou”
• E vários outros exemplos…

O termo renderizar é basicamente formado por um conjunto de etapas, sendo elas:

• O React armazena uma cópia do virtual DOM
• Quando o nosso componente é atualizado, o React cria um novo DOM virtual e compara com o antigo
• Então é feita uma comparação pelo Algoritmo de Diferenciação. Essa comparação é realizada em memória, dessa forma o componente ainda não foi atualizado na DOM.
• Após a comparação, o React segue em frente e cria um novo DOM Virtual com as alterações necessárias.
• Em seguida, ele atualiza o DOM do navegador com o menor número possível de alterações sem renderizar todo o DOM novamente. Isso melhora drasticamente a performance da aplicação

Existe uma diferença interna em como o processo de renderização é realizado no react e no react native, mas o objetivo final é o mesmo.

• O React funciona com o que é chamado de DOM Virtual: Uma cópia do DOM (Document Object Model) armazenado na memória que sincroniza com o DOM real sempre que uma atualização é necessária. Praticamente, isso significa que nós específicos da árvore HTML serão atualizados à vontade.
• O React Native tem como alvo plataformas móveis, não há DOM aqui, pois não estamos trabalhando com documentos HTML. No entanto, assim como o DOM virtual do React, o RN cria uma hierarquia de árvore virtual que copia a hierarquia de UI específica para cada plataforma. Uma vez que o React enviou seus comandos para renderizar o layout, esta árvore virtual é traduzida para o idioma nativo correspondente (Java para Android e Objective-C para iOS), que é então traduzido para as visualizações reais na tela.

Então, depois de ler este conteúdo, você será capaz de entender como o fluxo de renderização e o algoritmo de reconciliação desempenham um papel importante para tornar a interface do usuário rápida, pois ele não atualiza completamente a DOM. Ele mudará apenas onde essas atualizações ocorrerem.