O que é "Montagem" no React js?

Estou ouvindo o termo "montar" muitas vezes enquanto aprendo o ReactJS. E parece haver métodos e erros do ciclo de vida em relação a esse termo. O que exatamente o React quer dizer com montagem?

Exemplos: componentDidMount() and componentWillMount()

A principal tarefa do React é descobrir como modificar o DOM para corresponder ao que os componentes desejam que sejam renderizados na tela.

Reaja fazendo isso "montando" (adicionando nós ao DOM), "desmontando" (removendo-os do DOM) e "atualizando" (fazendo alterações nos nós que já estão no DOM).

Como um nó React é representado como um nó DOM e onde e quando ele aparece na árvore DOM é gerenciado pela API de nível superior . Para ter uma idéia melhor do que está acontecendo, veja o exemplo mais simples possível:

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

Então, o que é fooe o que você pode fazer com isso? foo, no momento, é um objeto JavaScript simples que se parece com isso (simplificado):

{
  type: FooComponent,
  props: {}
}

No momento, ele não está em nenhum lugar da página, ou seja, não é um elemento DOM, não existe em nenhum lugar na árvore DOM e, além de ser o nó do elemento React, não tem outra representação significativa no documento. Apenas informa ao React o que precisa estar na tela se esse elemento React for renderizado. Ainda não está "montado".

Você pode dizer ao React para "montá-lo" em um contêiner DOM chamando:

ReactDOM.render(foo, domContainer);

Isso indica ao React que é hora de mostrar foona página. O React criará uma instância da FooComponentclasse e chamará seu rendermétodo. Digamos que renderize um <div />, nesse caso o React criará um divnó DOM para ele e o inserirá no contêiner DOM.

Esse processo de criação de instâncias e nós DOM correspondentes aos componentes React e a inserção deles no DOM é chamado de montagem.

Observe que normalmente você chamaria apenas ReactDOM.render()para montar o (s) componente (s) raiz (s). Você não precisa "montar" manualmente os componentes filhos. Toda vez que um componente pai chama setState(), e seu rendermétodo diz que um filho em particular deve ser renderizado pela primeira vez, o React automaticamente "monta" esse filho em seu pai.

React é uma estrutura isomórfica / universal . Isso significa que existe uma representação virtual da árvore de componentes da interface do usuário e é separada da renderização real que ela gera no navegador. A partir da documentação:

A reação é tão rápida, porque nunca fala diretamente com o DOM. O React mantém uma representação rápida na memória do DOM.

No entanto, essa representação na memória não está vinculada diretamente ao DOM no navegador (mesmo que seja chamada Virtual DOM, que é um nome infeliz e confuso para uma estrutura de aplicativos universal) e é apenas um dado do tipo DOM. estrutura que representa toda a hierarquia de componentes da interface do usuário e metadados adicionais. O DOM virtual é apenas um detalhe de implementação.

"Acreditamos que os verdadeiros fundamentos do React são simplesmente idéias de componentes e elementos: poder descrever o que você deseja processar de maneira declarativa. Essas são as partes compartilhadas por todos esses pacotes diferentes. As partes do React são específicas para determinadas renderizações as metas geralmente não são o que pensamos quando pensamos em React ". - Blog do React js

Portanto, a conclusão é que o React está se tornando agnóstico , o que significa que não se importa com o resultado final. Pode ser uma árvore DOM no navegador, pode ser XML, componentes nativos ou JSON.

"Quando analisamos pacotes como react-native, react-art, react-canvas e react-three, ficou claro que a beleza e a essência do React não têm nada a ver com navegadores ou com o DOM". - Blog do React js

Agora que você sabe como o React funciona, é fácil responder à sua pergunta :)

Montagem é o processo de saída da representação virtual de um componente na representação final da interface do usuário (por exemplo, DOM ou Componentes Nativos).

Em um navegador, isso significaria a saída de um React Element para um elemento DOM real (por exemplo, um elemento HTML div ou li ) na árvore DOM. Em um aplicativo nativo, isso significaria a saída de um elemento React em um componente nativo. Você também pode gravar seu próprio renderizador e enviar os componentes do React para JSON ou XML ou mesmo XAML, se tiver coragem.

Portanto, os manipuladores de montagem / desmontagem são críticos para um aplicativo React, porque você só pode ter certeza de que um componente é gerado / renderizado quando montado . No entanto, o componentDidMountmanipulador é chamado apenas ao renderizar para uma representação de interface do usuário real (DOM ou componentes nativos), mas não se você estiver renderizando para uma string HTML no servidor usando renderToString, o que faz sentido, pois o componente não é realmente montado até atingir o valor navegador e executa nele.

E, sim, Mounting também é um nome infeliz / confuso, se você me perguntar. IMHO componentDidRendere componentWillRenderseria nomes muito melhores.

Montagem refere-se ao componente em React (nós DOM criados) sendo anexado a alguma parte do documento. É isso aí!

Ignorando React, você pode pensar nessas duas funções nativas como montagem:

replaceChild

appendChild

Quais são provavelmente as funções mais comuns que o React usa para montar internamente.

Imagine:

componentWillMount === antes da montagem

E:

componentDidMount === montagem posterior

https://facebook.github.io/react/docs/tutorial.html

Aqui, componentDidMount é um método chamado automaticamente pelo React quando um componente é renderizado.

O conceito é que você está dizendo ao ReactJS ", pegue essa coisa, esta caixa de comentários ou imagem giratória ou o que eu quiser na página do navegador, e vá em frente e coloque-a na página do navegador. Quando terminar, ligue para minha função a que me vinculei para componentDidMountque eu possa continuar. "

componentWillMounté o oposto Ele será acionado imediatamente ANTES que o seu componente seja processado.

Veja também aqui https://facebook.github.io/react/docs/component-specs.html

Por fim, o termo "mount" parece exclusivo do react.js. Eu não acho que seja um conceito geral de javascript, ou mesmo um conceito geral de navegador.

Montagem refere-se ao carregamento da página inicial quando o componente React é renderizado pela primeira vez. Na documentação do React para montagem: componentDidMount:

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

Você pode contrastar isso com a função componentDidUpdate, que é chamada toda vez que o React é processado (exceto para a montagem inicial).

O principal objetivo do React js é criar componentes reutilizáveis. Aqui, os componentes são as partes individuais de uma página da web. Por exemplo, em uma página da Web, o cabeçalho é um componente, o rodapé é um componente, uma notificação de brinde é um componente e etc. O termo "montagem" indica que esses componentes são carregados ou renderizados no DOM. Essas são muitas APIs e métodos de nível superior que lidam com isso.

Para simplificar, montado significa que o componente foi carregado no DOM e desmontado significa que os componentes foram removidos do DOM.