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:

  1. DOM Virtual  
  2. 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:

  1. Dois elementos de tipos diferentes produzirão árvores diferentes .
  2. 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)
  3. Ao comparar dois elementos do mesmo tipo , mantenha o nó subjacente como o mesmo e atualize apenas as alterações nos atributos ou estilos.
  4. 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: