No artigo anterior sobre introdução ao JSX , aprendemos que podemos usar JSX para armazenar marcações HTML em variáveis ​​Javascript. Agora, ReactJS é uma biblioteca para construir interfaces de usuário ativas, portanto, a renderização é uma das partes integrantes do ReactJS. O React fornece aos desenvolvedores um pacote react -dom, também conhecido como ReactDOM, para acessar e modificar o DOM. Vamos ver resumidamente qual a necessidade de ter o pacote. 

O que é DOM? 

DOM, abreviado como Document Object Model, é uma representação lógica padrão do World Wide Web Consortium de qualquer página da web. Em palavras mais fáceis, DOM é uma estrutura em forma de árvore que contém todos os elementos e suas propriedades de um site como seus nós. O DOM fornece uma interface com neutralidade de idioma que permite acessar e atualizar o conteúdo de qualquer elemento de uma página da web. 

Antes do React, os desenvolvedores manipulavam diretamente os elementos DOM, o que resultava em manipulação frequente do DOM, e cada vez que uma atualização era feita, o navegador tinha que recalcular e redesenhar toda a visualização de acordo com o CSS específico da página, o que fazia com que o processo total consumisse um muito tempo. Como uma melhoria, o React trouxe à cena o DOM virtual. O DOM virtual pode ser referido como uma cópia da representação real do DOM que é usada para conter as atualizações feitas pelo usuário e, finalmente, refleti-lo no DOM do navegador original, consumindo muito menos tempo. 

O que é ReactDOM? 

ReactDOM é um pacote que fornece métodos específicos de DOM que podem ser usados ​​no nível superior de um aplicativo da web para permitir uma maneira eficiente de gerenciar elementos DOM da página da web. O ReactDOM fornece aos desenvolvedores uma API contendo os métodos a seguir e mais alguns. 

• render()
• findDOMNode()
• unmountComponentAtNode()
• hidrato()
• createPortal()

Pré-requisito: para usar o ReactDOM em qualquer aplicativo da web React, devemos primeiro importar o ReactDOM do pacote react-dom usando o seguinte trecho de código:  

import ReactDOM from 'react-dom'

Função render()

Este é um dos métodos mais importantes do ReactDOM. Esta função é usada para renderizar um único componente React ou vários componentes agrupados em um componente ou elemento div. Esta função usa os métodos eficientes do React para atualizar o DOM, sendo capaz de alterar apenas uma subárvore, métodos de diff eficientes, etc. 

Sintaxe : 

ReactDOM.render(element, container, callback)

Parâmetros : este método pode ter no máximo três parâmetros, conforme descrito a seguir.  

• elemento: este parâmetro espera que uma expressão JSX ou um Elemento React seja renderizado.
• container: Este parâmetro espera o container no qual o elemento deve ser renderizado.
• callback: Este é um parâmetro opcional que espera uma função que deve ser executada assim que a renderização for concluída.

Tipo de retorno: esta função retorna uma referência ao componente ou nulo se um componente sem estado foi processado. 
 

Função findDOMNode()

Essa função é geralmente usada para obter o nó DOM onde um componente React específico foi renderizado. Este método é muito menos usado, como o seguinte pode ser feito adicionando um atributo ref a cada componente em si. 

Sintaxe : 

ReactDOM.findDOMNode(component)

Parâmetros : este método usa um único componente de parâmetro que espera que um Componente React seja pesquisado no DOM do navegador. 

Tipo de retorno: esta função retorna o nó DOM onde o componente foi renderizado com sucesso, caso contrário, nulo. 
 

Função unmountComponentAtNode()

Esta função é usada para desmontar ou remover o Componente React que foi renderizado para um contêiner específico. Como exemplo, você pode pensar em um componente de notificação; depois de um breve período de tempo, é melhor remover o componente, tornando a página da web mais eficiente. 

Sintaxe :  

ReactDOM.unmountComponentAtNode(container)

Parâmetros : Este método usa um único contêiner de parâmetro que espera o contêiner DOM do qual o componente React deve ser removido. 

Tipo de retorno: Esta função retorna verdadeiro em caso de sucesso, caso contrário, é falso. 
 

Função hydrate()

Este método é equivalente ao método render(), mas é implementado ao usar a renderização do lado do servidor. 

Sintaxe : 

ReactDOM.hydrate(element, container, callback)

Parâmetros : este método pode ter no máximo três parâmetros, conforme descrito a seguir. 

• elemento: este parâmetro espera que uma expressão JSX ou um componente React seja renderizado.
• container: Este parâmetro espera o container no qual o elemento deve ser renderizado.
• callback: Este é um parâmetro opcional que espera uma função que deve ser executada assim que a renderização for concluída.

Tipo de retorno: esta função tenta anexar ouvintes de eventos à marcação existente e retorna uma referência ao componente ou nulo se um componente sem estado foi processado. 
 

Função createPortal()

Normalmente, quando um elemento é retornado do método de renderização de um componente, ele é montado no DOM como um filho do nó pai mais próximo, o que em alguns casos pode não ser desejado. Os portais nos permitem renderizar um componente em um nó DOM que reside fora da hierarquia DOM atual do componente pai. 

Sintaxe : 

ReactDOM.createPortal(child, container)

Parâmetros : este método usa dois parâmetros, conforme descrito a seguir.  

• child: Este parâmetro espera que uma expressão JSX ou um Componente React seja renderizado.
• container: Este parâmetro espera o container no qual o elemento deve ser renderizado.

Tipo de retorno: esta função não retorna nada. 
 

Pontos importantes a serem observados:

• ReactDOM.render() substitui o filho do contêiner fornecido, se houver. Ele usa um algoritmo de diff altamente eficiente e pode modificar qualquer subárvore do DOM.
• A função findDOMNode() só pode ser implementada em componentes montados, portanto, os componentes funcionais não podem ser usados ​​no método findDOMNode().
• O ReactDOM usa observáveis, portanto, fornece uma maneira eficiente de lidar com o DOM.
• O ReactDOM pode ser usado tanto no lado do cliente quanto no lado do servidor.