Renderizando Elementos

Elementos são os menores blocos para a construção de aplicações em React.

Um elemento descreve o que queres ver no ecrã:

const element = <h1>Olá, mundo</h1>;

Ao contrário de elementos DOM do navegador, elementos React são objectos simples e utilizam menos recursos ao serem criados. O React DOM é responsável por actualizar o DOM para igualar os elementos React.

Nota:

Poderás confundir elementos com o mais amplo e conhecido conceito de “componentes”. Iremos introduzir componentes na próxima seccção. Elementos são o que compõem um componente, e recomendamos que leias esta secção antes de prosseguires.

Renderizando um Elemento no DOM

Suponhamos que exista um <div> algures no teu ficheiro HTML:

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

Chamamos a isto um nó “raiz” do DOM porque tudo dentro dele será controlado pelo React DOM.

Aplicações construídas apenas com React geralmente têm apenas um único nó raiz no DOM. Se desejas integrar o React numa aplicação já existente, podes ter os nós raiz isolados que quiseres.

Para renderizar um elemento React num nó raiz, passa ambos para ReactDOM.render():

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Try it on CodePen

Exibe “Olá, mundo” na página.

Actualizando o Elemento Renderizado

Elementos React são imutáveis. Uma vez criado o elemento, não poderás modificar os seus filhos ou atributos. Um elemento é como um frame num filme: representa a interface gráfica (UI) num certo momento.

Com o que aprendemos até agora, a única forma de actualizar a interface gráfica (UI) é criando um novo elemento e passando-o ao ReactDOM.render().

Vê o seguinte exemplo de um relógio:

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Try it on CodePen

O exemplo invoca o método ReactDOM.render() a cada segundo a partir de um callback do setInterval().

Nota:

Na prática, a maioria das aplicações em React apenas invocam o método ReactDOM.render() uma vez. Nas secções seguintes, aprenderemos como este código pode ser encapsulado em componentes com estado.

Recomendamos que não saltes os tópicos porque eles se complementam.

O React Apenas Actualiza O Que É Necessário

O React DOM compara o novo elemento e seus filhos com o anterior e apenas aplica as modificações necessárias no DOM para que fique no estado desejado.

Podes verificar isto inspeccionando o último exemplo com as ferramentas do navegador:

Actualizações granulares no inspector do DOM

Embora nós criemos um elemento descrevendo toda a estrutura da interface gráfica (UI) a cada instante, somente o nó de texto cujo conteúdo muda é actualizado pelo React DOM.

Com base na nossa experiência, pensar em como a interface gráfica (UI) deve estar num determinado momento, ao invés de pensar em como modificá-la com o tempo, evita uma série de bugs.