Funcionamento do React

Virtual DOM

Um dos aspetos mais importantes do funcionamento do React é o Virtual DOM.

O React cria um Virtual DOM em memória que é uma representação do DOM real da página no browser. Os objetos que representam os componentes residem no Virtual DOM, onde são manipulados, e só quando há uma alteração num desses objetos no Virtual DOM é que o DOM
real é atualizado mas somente no que a essa alteração diz respeito.

O Virtual DOM faz com que o desempenho e velocidade do React seja superior à de outras tecnologias.

Elementos React

Os elementos React são representações dos objetos que representam o DOM de uma página.

Os elementos React residem no Virtual DOM e são criados pelo método React.createElement().

O método React.createElement() pode ser chamado diretamente (o que é fastidioso e trabalhoso) ou através de uma mistura de HTML e Javascript chamado JSX, que veremos mais à frente.

Portanto, o React cria elementos React no Virtual DOM, com o método React.createElement() e só depois cria os objetos de Javascript no DOM da página a partir destes elementos React.

O método React.createElement() é chamado internamente sem intervenção do programador.

Fluxo unidirecional de dados

Em React os dados fluem num único sentido: do componente Pai para o componente Filho e não ao contrário.

Os dados são transferidos do componente Pai para o componente Filho via props, que veremos mais tarde.

Numa árvore de componentes os dados são guardados no estado do componente de topo, o componente Pai. Daí, podem ser transferidos para os componentes abaixo, os componentes filhos, via props. Os componentes filhos, contudo, não podem modificar os dados no
componente Pai onde residem.