Como React resolve o problema?

A solução do React para manipulações no DOM, que por sinal são bem caras, é o DOM Virtual. O DOM Virtual é uma representação leve, em memória, do DOM real no React. O DOM Virtual clona o DOM real e está disponível como um grande e único objeto JavaScript. Em React, uma vez que o aplicativo é carregado, então a partir do DOM real é criado a representação do DOM Virtual.

O que é o DOM?

Antes de começar a falar sobre o DOM virtual, vamos falar um pouco sobre o básico - o DOM original.

DOM significa Document Object Model. É uma maneira de representar um documento estruturado através de objetos. É uma convenção multi-plataforma e independente de linguagem para representar e interagir com dados em HTML, XML e outros. Os navegadores da Web manipulam os detalhes de implementação do DOM, para que possamos interagir com ele usando JavaScript e CSS. Podemos procurar por nós e mudar seus detalhes, remover um e inserir um novo.

Atualmente, a API DOM é quase cross-platform e cross-browser. Então, qual é o problema com isso?

Problema do DOM

O principal problema é que o DOM nunca foi otimizado para criar UI dinâmico.

Podemos trabalhar com ele usando JavaScript e bibliotecas como o jQuery. Mas jQuery e outros fizeram pouco para resolver problemas de desempenho. Pense nas redes sociais modernas, como Twitter, Facebook ou Pinterest. Depois de deslizar um pouco, o usuário terá dezenas de milhares de nós. Interagir com eles de forma eficiente é um grande problema. Tente mover 5 pixel de 1000 divs por exemplo. Pode demorar mais de um segundo. É muito tempo para a web moderna. Você pode otimizar o script e usar alguns truques, mas no final, é uma dor trabalhar com páginas enormes e UI dinâmicas.

DOM virtual

Ao invés de tocar o DOM diretamente, estamos construindo uma versão abstrata do mesmo. Trabalhamos com algum tipo de cópia leve de nosso DOM. Podemos mudá-lo como quisermos e, em seguida, salvar em nossa árvore de DOM real. Enquanto salvamos, devemos comparar, encontrar a diferença e mudar (re-renderizar) o que deve ser alterado.

É muito mais rápido do que trabalhar diretamente com DOM, porque não exige todas as peças de peso pesado que entram em um DOM real. Podemos ilustrar o que acontece da seguinte maneira:

Conforme pode ver na imagem acima, nossa página será renderizada e no final teremos um árvove de elementos (DOM real). O React cria um DOM Virtual (In-memory DOM na figura) a partir de nosso DOM real. Perceba que a manipulação do estado de nossa aplicação é feita inteiramente com o DOM Virtual. Quando o React percebe que algo precisa ser atualizado, conforme aquele nó vermelho no DOM virtual, ele executa um algoritmo de diff para poder atualizar no DOM real somente o que for necessário. Essa abordagem é muito rápida e eficaz.

Voltando para o nosso exemplo...

Com o React os desenvolvedores geralmente usam JSX, que tem uma sintaxe parecida com HTML. Para nosso carrinho de compras, o JSX pode acabar ficando assim:

<ul>
  {
    this.props.items.map(function(item) {
      return (<li key={item}>{item}</li>);
    })
  }
</ul>

Não se preocupe com a sintaxe ou se não entendeu esse código. Mais na frente iremos detalhar cada aspecto que podemos ver nesse código, desde o que é esse JSX a esse atributo props.

Sempre que os dados mudarem, o código acima vai será executado novamente. Podemos comparar essa chamada com a que pensamos em fazer para renderizar tudo de novo, mas com uma diferença. O React vai renderizar o que vemos acima para o DOM Virtual primeiro, depois disso ele compara esse DOM Virtual com o verdadeiro DOM, só então faz a mudança do que for necessário.

No nosso exemplo, se nós adicionarmos Arroz na lista e renderizarmos novamente, o React vai descobrir por conta própria que apenas um único elemento do DOM precisa ser criado e adicionado no final da lista.

React não é a única biblioteca que usa um DOM virtual para resolver este problema, mas é de longe a mais popular.

Então, o que é React? Você sabe que o React cria uma maneira simples para os desenvolvedores de JavaScript atualizar o DOM para corresponder com o seu modelo de dados. Isso é tudo que faz!

Se você quiser uma descrição de uma linha: React é uma biblioteca JavaScript que permite atualizações rápidas no DOM por meio de um 'DOM virtual'.

É isso? Sim! Essa é a essência do que o React realmente é. A maioria dos outros recursos que você pode associar ao React realmente ocorre em outras bibliotecas: armazenamento de dados, roteamento e rede. Nada disso acontece em React.

Desanime não pequeno Padawan. Esse é apenas o começo de nossa jornada rumo a maestria Jedi. Estás prestes a mudar sua carreira com o que vamos aprender nesse livro.