Renderizar e Consolidar
Antes que seus componentes sejam exibidos na tela, eles devem ser renderizados pelo React. Entender as etapas desse processo ajudará você a pensar sobre como seu código é executado e a explicar seu comportamento.
Você aprenderá
- O que renderização significa no React
- Quando e por que o React renderiza um componente
- As etapas envolvidas na exibição de um componente na tela
- Por que a renderização nem sempre produz uma atualização do DOM
Imagine que seus componentes são cozinheiros na cozinha, montando pratos saborosos a partir de ingredientes. Nesse cenário, o React é o garçom que recebe os pedidos dos clientes e os entrega. Esse processo de solicitar e servir a interface do usuário tem três etapas:
- Dispararuma renderização (entregar o pedido do cliente na cozinha)
- Renderizaro componente (preparar o pedido na cozinha)
- Consolidarno DOM (colocar o pedido na mesa)
Disparar
Renderizar
Consolidar
Ilustrado porRachel Lee Nabors
Etapa 1: Disparar uma renderização
Existem dois motivos para um componente ser renderizado:
- É a renderização inicial do componente.
- O estado do componente (ou de um de seus ancestrais) foi atualizado.
Renderização inicial
Quando seu aplicativo é iniciado, você precisa disparar a renderização inicial. Frameworks e sandboxes às vezes ocultam esse código, mas ele é feito chamandocreateRootcom o nó DOM de destino e, em seguida, chamando seu métodorendercom seu componente:
Tente comentar a chamadaroot.render()e veja o componente desaparecer!
Re-renderizações quando o estado é atualizado
Depois que o componente foi renderizado inicialmente, você pode disparar novas renderizações atualizando seu estado com afunção set.Atualizar o estado do seu componente automaticamente coloca uma renderização na fila. (Você pode imaginar isso como um cliente de restaurante pedindo chá, sobremesa e várias coisas depois de fazer seu primeiro pedido, dependendo do estado de sua sede ou fome.)
Atualização de estado...
...dispara...
...renderização!
Ilustrado porRachel Lee Nabors
Etapa 2: React renderiza seus componentes
Depois que você dispara uma renderização, o React chama seus componentes para descobrir o que exibir na tela.“Renderizar” é o React chamando seus componentes.
- Na renderização inicial,o React chamará o componente raiz.
- Para renderizações subsequentes,o React chamará o componente de função cuja atualização de estado disparou a renderização.
Esse processo é recursivo: se o componente atualizado retornar algum outro componente, o React renderizaráessecomponente em seguida, e se esse componente também retornar algo, ele renderizaráaquelecomponente em seguida, e assim por diante. O processo continuará até que não haja mais componentes aninhados e o React saiba exatamente o que deve ser exibido na tela.
No exemplo a seguir, o React chamaráGallery() e
- Durante a renderização inicial,o React irácriar os nós DOMpara
<section>,<h1>e três tags<img>. - Durante uma re-renderização,o React calculará quais de suas propriedades, se houver, mudaram desde a renderização anterior. Ele não fará nada com essa informação até a próxima etapa, a fase de commit.
Armadilha
A renderização deve ser sempre umcálculo puro:
- Mesmas entradas, mesma saída.Dadas as mesmas entradas, um componente deve sempre retornar o mesmo JSX. (Quando alguém pede uma salada com tomates, não deve receber uma salada com cebolas!)
- Cuida de sua própria vida.Não deve alterar quaisquer objetos ou variáveis que existiam antes da renderização. (Um pedido não deve alterar o pedido de outra pessoa.)
Caso contrário, você pode encontrar bugs confusos e comportamentos imprevisíveis à medida que sua base de código cresce em complexidade. Ao desenvolver no "Modo Estrito", o React chama a função de cada componente duas vezes, o que pode ajudar a expor erros causados por funções impuras.
Etapa 3: O React confirma as alterações no DOM
Após renderizar (chamar) seus componentes, o React modificará o DOM.
- Para a renderização inicial,o React usará a API DOMappendChild()para colocar na tela todos os nós DOM que criou.
- Para re-renderizações,o React aplicará as operações mínimas necessárias (calculadas durante a renderização!) para fazer o DOM corresponder à saída de renderização mais recente.
O React só altera os nós DOM se houver uma diferença entre as renderizações.Por exemplo, aqui está um componente que é re-renderizado com diferentes props passadas de seu pai a cada segundo. Observe como você pode adicionar algum texto no<input>, atualizando seuvalue, mas o texto não desaparece quando o componente é re-renderizado:
Isso funciona porque, durante esta última etapa, o React atualiza apenas o conteúdo do<h1>com o novotime. Ele vê que o<input>aparece no JSX no mesmo lugar da última vez, então o React não toca no<input>—nem em seuvalue!
Epílogo: Pintura do navegador
Após a renderização ser concluída e o React ter atualizado o DOM, o navegador irá repintar a tela. Embora esse processo seja conhecido como "renderização do navegador", nos referiremos a ele como "pintura" para evitar confusão ao longo da documentação.
Ilustrado porRachel Lee Nabors
Recapitulação
- Qualquer atualização de tela em um aplicativo React acontece em três etapas:
- Disparo
- Renderização
- Commit
- Você pode usar o Modo Estrito para encontrar erros em seus componentes
- O React não toca no DOM se o resultado da renderização for o mesmo da última vez