Reagir e o DOM Virtual

Primeiro, o Domain-Object-Model (DOM) é uma representação analisada pelo navegador que é composta pela estrutura e conteúdo de um documento. É uma interface de programação para documentos HTML ou XML que permite que os programas alterem o estilo, o conteúdo e a estrutura do documento. O DOM atua como uma estrutura de dados ao vivo e, quando modificado, reflete essa alteração na tela.

Uma página da Web é um documento que pode ser exibido como fonte HTML ou em uma janela do navegador - embora pareçam diferentes - são o mesmo documento. O DOM representa este documento no navegador como objetos e nós e permite a manipulação em tempo real ao permitir que linguagens de programação acessem esses objetos e nós. Sem o DOM, o JavaScript não teria notação de páginas da web e seus elementos e, portanto, não teria como acessar e manipular uma página da web.

A manipulação do DOM é central para a web moderna e interativa. No entanto, é lento. Com a maioria dos frameworks JavaScript, o DOM é atualizado com muito mais frequência do que o necessário. Agora, vamos falar do DOM virtual. O DOM virtual foi popularizado pelas pessoas que criaram o React (uma biblioteca JavaScript), e é um dos conceitos centrais que tornam o React tão bom.

Sem se aprofundar muito nisso, o React é uma biblioteca JavaScript de front-end usada para criar interfaces de usuário da Web e móveis. Ele permite que os desenvolvedores criem componentes de interface do usuário reutilizáveis ​​- que são funções ou classes JavaScript que podem aceitar entrada (também conhecidas como propriedades ou props) e retornar elementos React que descrevem como parte da interface do usuário aparecerá. Um componente React é renderizado novamente quando seu estado interno muda devido à interação do usuário (por exemplo, o usuário digita em um campo de entrada) no navegador ou se recebe props (por exemplo, um componente pai tem uma atualização de estado que foi passada para baixo como um suporte para um componente filho).

No React, existe um objeto DOM virtual correspondente para cada objeto DOM. Os objetos do DOM virtual possuem todas as mesmas propriedades dos objetos do DOM real, porém não é possível alterar o que está na tela tornando-o muito mais leve. É como os esquemas para o DOM em vez do edifício físico. O DOM virtual é uma representação do DOM real . O DOM virtual é criado quando novos elementos são adicionados à interface do usuário (UI).

O objetivo deste DOM virtual é que, quando uma alteração em um gatilho de elemento no navegador é uma nova renderização de um componente, todo o DOM virtual é atualizado - o que é muito mais rápido do que no DOM real, pois nada é representado no -tela neste momento. As diferenças (ou diferenças) entre o DOM virtual atualizado e o DOM virtual pré-atualizado são comparadas - e apenas os objetos DOM virtuais com diferenças são atualizados no DOM real e representados no navegador. Isso significa que toda a página da Web não precisa ser renderizada novamente toda vez que ocorre uma alteração, tornando o processo muito mais rápido.

Digamos que o React não incorporou a funcionalidade do DOM virtual - sempre que um evento é acionado ou estado ou props de qualquer componente são alterados, todo o DOM é atualizado. Isso significa que todos os dados são recuperados novamente (lento) e, em seguida, toda a página da Web é renderizada novamente (lento) a cada alteração. Graças ao DOM virtual, os usuários do aplicativo nativo não precisam esperar que toda a árvore DOM seja atualizada toda vez que uma alteração ocorre no navegador.