Respostas:
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.
findDOMNodeelementos React).
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.
componentDidRenderseja um substituto, componentDidMountporque o componente pode renderizar várias vezes quando os objetos são alterados depois de montados uma vez.
(id === that.id) ? <Component /> : null| /app/items/:id| this.setState(...).
/react-js-the-king-of-universal-apps/( com os comentários de edição claramente mencionando que é um link quebrado ), mas os colegas rejeitaram a edição as duas vezes . Alguém pode me orientar sobre o que há de errado na edição de uma resposta e na remoção de um link quebrado?
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:
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
appendChild, o que é render?
renderé o método real que fará a montagem em si. Então componentWillMount== antes, render== faz a inserção DOM, e componentDidMount== depois de montar (ou renderchamou a API DOM para inserir componentes e que a operação assíncrona foi totalmente concluída)
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.
componentDidUpdateé chamado em seu lugar.
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.
React.createElement(FooComponent)não está criando uma instância deFooComponent.fooé uma representação virtual do DOM,FooComponenttambém conhecido como elemento React. Mas talvez seja isso que você quis dizer comFooComponenttipo de reação . Independentemente, você não monta componentes no React, mas chama render que, por sua vez, pode montar o componente se um nó DOM real precisar ser criado para representar o componente na árvore do DOM. A montagem real é o evento em que isso acontece pela primeira vez.