Reconciliação ReactJS
O processo de reconciliação torna o React mais rápido. Reconciliação é o processo pelo qual o React atualiza o DOM do navegador.
Os conceitos importantes por trás do funcionamento do processo de reconciliação são:
- DOM Virtual
- Algoritmo de Diffing
O termo renderização em React pode ser identificado de perto como fazer ou tornar-se . Na renderização tradicional, o navegador executa as seguintes tarefas:
- Cria um DOM (Document Object Model) representado por uma estrutura de árvore.
- Renderiza quaisquer novos dados para o DOM, mesmo se os dados forem semelhantes aos anteriores.
Essa renderização pelo navegador tem uma sequência de etapas e é bastante cara por natureza. O conceito de Virtual DOM usado pelo React torna a renderização muito mais rápida.
DOM virtual: o React renderiza componentes JSX para o DOM do navegador, mas mantém uma cópia do DOM real para si mesmo. Esta cópia é o Virtual DOM . Podemos pensar nele como o irmão gêmeo do DOM real ou do navegador. As seguintes ações ocorrem no React:
- O React armazena uma cópia do DOM do navegador, que é chamada de DOM virtual.
- Quando fazemos alterações ou adicionamos dados , o React cria um novo DOM Virtual e o compara com o anterior .
- A comparação é feita por Diffing Algorithm . O legal é que todas essas comparações acontecem na memória e nada foi alterado no navegador.
- Após a comparação, o React segue em frente e cria um novo DOM Virtual com as alterações . É importante notar que até 200.000 nós DOM virtuais podem ser produzidos em um segundo.
- Em seguida, ele atualiza o DOM do navegador com o menor número de alterações possível, sem renderizar todo o DOM novamente. (Ref: Fig.1) Isso muda a eficiência de um aplicativo tremendamente
Fig.1: Calculando Diff e atualizando o DOM do navegador
Suponha que temos novos dados semelhantes aos anteriores, o Virtual DOM compara as estruturas anteriores e as novas e vê que não há alterações, portanto, nada é renderizado para o navegador. É assim que o Virtual DOM está ajudando a melhorar o desempenho do navegador.
Como este Virtual DOM se compara à sua versão anterior?
É aqui que o algoritmo de Diffing entra em ação . Alguns conceitos usados por este algoritmo são:
- Dois elementos de tipos diferentes produzirão árvores diferentes .
- A pesquisa de largura primeiro (BFS) é aplicada porque se um nó for encontrado como alterado, ele irá renderizar novamente a subárvore inteira, portanto, a abordagem de profundidade não é exatamente ideal. (Ref: Fig.2)
- Ao comparar dois elementos do mesmo tipo , mantenha o nó subjacente como o mesmo e atualize apenas as alterações nos atributos ou estilos.
- O React usa otimizações para que uma diferença mínima possa ser calculada em O (N) de forma eficiente usando este Algoritmo.
Fig.2: BFS para atravessar Virtual DOM
Referência:
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva