Dissecando React - Parte 2: Renderização e Imutabilidade

O que são Elementos?

Resumidamente, seriam nossas moléculas em uma aplicação em React. São nossos elementos que compõem nossos componentes, e portanto, não devem ser confundidos com tal.

    const meuElemento = <p>Conteudo do Elemento</p>

Acima, um exemplo de um elemento. Como evidenciado na documentação do React, elementos são meros objetos e são de baixissimo custo para sua criação, quando comparados com elementos do DOM do navegador. Deixando a cargo do React DOM controlar e atualizar os elementos no DOM.

Imutabilidade e Renderização

Precisamos compreender alguns termos importantes e que são responsáveis pela renderização de nossos elementos.

Primeiramente, root. Observe o trecho de código a seguir:

    <div id="root"></div>

    const titulo = <h1>Conteudo do Titulo</h1>
    ReactDOM.render(titulo, document.getElementById('root'));

Root define o nó (ou node) onde nosso ReactDOM irá gerenciar os elementos ali inseridos. No exemplo acima, estamos inserindo o elemento titulo na nossa div raíz.

Nossas aplicações geralmente possuirão apenas um único root node. Essa situação pode ser diferente em aplicações que estão passando por um processo de integração com React.

No entanto, como o ReactDOM pode saber o que mudou e que deve ser atualizado na nossa tela? Seguindo o princípio da imutabilidade. Elementos em React são imutáveis, ou seja, não podem mudar seus atributos uma vez que criados. Eles representam sua interface em um determinado ponto do tempo. Profundo, não?

Então, segundamente, temos um outro nome importante: ReactDOM.render(). Até então, nossa única forma de criar um novo elemento e renderizá-lo. Todas as vezes que mudarmos o conteúdo de nossa tag titulo teríamos que chamar ReactDOM.render() novamente e recriar este elemento.

E é neste ponto que a magia acontece...

Em time que tá ganhando não se mexe... Ou quase isso.

É basicamente isso que o ReactDOM faz. Compara os elementos e seus filhos com os elementos anteriores, e só atualiza no DOM as alterações necessárias, evitando assim um carregamento total da página para uma simples alteração.

Por mais que nossos elementos sejam complexos, apenas as partes que apresentarem uma mudança quando comparados a suas versões anteriores serão re-renderizados na tela.

Tendo este comportamento em mente, fica muito mais fácil entender como são tratados nossos elementos no ReactDOM.

Conclusão

Enquanto nossa leitura anterior foi mais intensa, a de hoje já foi um pouco mais simples, mas não menos importante. Entender o princípio da imutabilidade e como nosso ReactDOM atualiza as informações no DOM de nosso navegador são peças chave para realmente dominar o comportamento de nossos componentes e aplicações.

Espero que este texto sirva de alguma ajuda para fixar os conceitos de React, e que sirva como uma ponte pro nosso próximo texto que está por vir, onde falarei melhor sobre componentes, classes e funções.

Seu feedback é muito importante para que eu sempre melhore! Aguardo seu contato nos comentários ou pessoalmente.

Até a proxima!