Risposte:
Il compito principale di React è capire come modificare il DOM in modo che corrisponda a ciò che i componenti vogliono che venga visualizzato sullo schermo.
React lo fa "montando" (aggiungendo nodi al DOM), "smontando" (rimuovendoli dal DOM) e "aggiornando" (apportando modifiche ai nodi già nel DOM).
Il modo in cui un nodo React viene rappresentato come nodo DOM e dove e quando appare nell'albero DOM è gestito dall'API di primo livello . Per avere un'idea migliore di quello che sta succedendo, guarda l'esempio più semplice possibile:
// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);Quindi cos'è fooe cosa puoi farci? foo, al momento, è un semplice oggetto JavaScript che somiglia più o meno a questo (semplificato):
{
type: FooComponent,
props: {}
}Al momento non è da nessuna parte sulla pagina, cioè non è un elemento DOM, non esiste da nessuna parte nell'albero DOM e, a parte essere il nodo dell'elemento React, non ha altre rappresentazioni significative nel documento. Dice solo a React cosa deve essere sullo schermo se questo elemento React viene renderizzato.Non è ancora "montato".
Puoi dire a React di "montarlo" in un contenitore DOM chiamando:
ReactDOM.render(foo, domContainer);Questo dice a React che è ora di mostrare foosulla pagina. React creerà un'istanza della FooComponentclasse e chiamerà il suo rendermetodo. Diciamo <div />che esegue il rendering di un , in tal caso React creerà un divnodo DOM per esso e lo inserirà nel contenitore DOM.
Questo processo di creazione di istanze e nodi DOM corrispondenti ai componenti React e di inserirli nel DOM è chiamato montaggio.
Nota che normalmente chiameresti solo ReactDOM.render()per montare i componenti root. Non è necessario "montare" manualmente i componenti figlio. Ogni volta che un componente genitore chiama setState(), e il suo rendermetodo dice che un particolare figlio dovrebbe essere renderizzato per la prima volta, React automaticamente "monterà" questo figlio nel suo genitore.
findDOMNodesu elementi React).
React è un framework isomorfo / universale . Ciò significa che esiste una rappresentazione virtuale dell'albero dei componenti dell'interfaccia utente e che è separata dal rendering effettivo che viene visualizzato nel browser. Dalla documentazione:
React è così veloce perché non parla mai direttamente con il DOM. React mantiene una rapida rappresentazione in memoria del DOM.
Tuttavia, quella rappresentazione in memoria non è legata direttamente al DOM nel browser (anche se si chiama Virtual DOM, che è un nome sfortunato e confuso per un framework di app universali), ed è solo un dato simile a DOM- struttura che rappresenta la gerarchia di tutti i componenti dell'interfaccia utente e i metadati aggiuntivi. Virtual DOM è solo un dettaglio di implementazione.
"Pensiamo che le vere basi di React siano semplicemente idee di componenti ed elementi: essere in grado di descrivere ciò che si desidera rendere in modo dichiarativo. Questi sono i pezzi condivisi da tutti questi diversi pacchetti. Le parti di React specifiche per determinati rendering gli obiettivi di solito non sono ciò a cui pensiamo quando pensiamo a React ". - React js Blog
Quindi, la conclusione è che React è agnostico nel rendering , il che significa che non si preoccupa di quale sia l'output finale. Può essere un albero DOM nel browser, può essere XML, componenti nativi o JSON.
"Quando guardiamo pacchetti come React Native, React-Art, React-Canvas e React-Three, è diventato chiaro che la bellezza e l'essenza di React non ha nulla a che fare con i browser o il DOM." - React js Blog
Ora che sai come funziona React, è facile rispondere alla tua domanda :)
Montaggio è il processo di output della rappresentazione virtuale di un componente nella rappresentazione dell'interfaccia utente finale (ad esempio DOM o componenti nativi).
In un browser ciò significherebbe trasmettere un elemento React in un elemento DOM effettivo (ad esempio un div HTML o li elemento ) nell'albero DOM. In un'applicazione nativa, ciò significherebbe trasmettere un elemento React in un componente nativo. Puoi anche scrivere il tuo renderer e generare i componenti React in JSON o XML o anche XAML se ne hai il coraggio.
Quindi, montare / smontare i gestori sono fondamentali per un'applicazione React, perché puoi essere certo che un componente venga visualizzato / renderizzato solo quando è montato . Tuttavia, il componentDidMountgestore viene richiamato solo quando si esegue il rendering in una rappresentazione dell'interfaccia utente effettiva (DOM o componenti nativi) ma non se si esegue il rendering in una stringa HTML sul server utilizzandorenderToString esegue il , il che ha senso, poiché il componente non è effettivamente montato finché non raggiunge il browser ed esegue in esso.
E, sì, anche il montaggio è un nome sfortunato / confuso, se me lo chiedi. IMHO componentDidRendere componentWillRendersarebbero nomi molto migliori.
componentDidRendersia un sostituto componentDidMountperché il componente può essere renderizzato più volte quando gli oggetti di scena cambiano dopo essere stati montati una volta.
(id === that.id) ? <Component /> : null| /app/items/:id| this.setState(...).
/react-js-the-king-of-universal-apps/( con i commenti di modifica che indicano chiaramente che si tratta di un collegamento interrotto ), ma i colleghi hanno rifiutato la modifica entrambe le volte . Qualcuno può guidarmi su cosa c'è di sbagliato nella modifica di una risposta e nella rimozione di un collegamento interrotto?
Il montaggio si riferisce al componente in React (nodi DOM creati) che è allegato a una parte del documento. Questo è tutto!
Ignorando React puoi pensare a queste due funzioni native come a un montaggio:
Quali sono probabilmente le funzioni più comuni che React usa per montare internamente.
Pensa a:
componentWillMount === prima del montaggio
E:
componentDidMount === dopo il montaggio
appendChild, che cos'è render?
renderè il metodo effettivo che eseguirà il montaggio stesso. Quindi componentWillMount== prima, render== fa l'inserimento DOM e componentDidMount== dopo il montaggio (o renderha chiamato un'API DOM per inserire il componente e l'operazione asincrona è stata completamente completata)
https://facebook.github.io/react/docs/tutorial.html
Qui, componentDidMount è un metodo chiamato automaticamente da React quando viene eseguito il rendering di un componente.
Il concetto è che stai dicendo a ReactJS, "per favore prendi questa cosa, questa casella di commento o l'immagine rotante o qualunque cosa voglio sulla pagina del browser, e vai avanti e mettila effettivamente nella pagina del browser. Quando hai finito, chiama la mia funzione a cui mi sono legato in componentDidMountmodo da poter procedere. "
componentWillMountè l'opposto. Si attiverà immediatamente PRIMA del rendering del componente.
Vedi anche qui https://facebook.github.io/react/docs/component-specs.html
Infine, il termine "mount" sembra essere unico per react.js. Non penso che sia un concetto generale di javascript, o anche un concetto generale di browser.
componentDidUpdateviene chiamato invece.
Il montaggio si riferisce al caricamento della pagina iniziale quando il componente React viene renderizzato per la prima volta. Dalla documentazione React per il montaggio: 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).
Puoi contrastarlo con la funzione componentDidUpdate, che viene chiamata ogni volta che React esegue il rendering (eccetto per il montaggio iniziale).
L'obiettivo principale di React js è creare componenti riutilizzabili. Qui, i componenti sono le singole parti di una pagina web. Ad esempio, in una pagina web l'intestazione è un componente, il piè di pagina è un componente, una notifica di avviso popup è un componente e così via. Il termine "mount" ci dice che questi componenti sono caricati o visualizzati nel DOM. Si tratta di molte API e metodi di primo livello che si occupano di questo.
Per semplificare, montato significa che il componente è stato caricato nel DOM e smontato significa che i componenti sono stati rimossi dal DOM.
React.createElement(FooComponent)non stai creando un'istanza diFooComponent.fooè una rappresentazione DOM virtualeFooComponentnota anche come elemento React. Ma forse è questo che intendevi perFooComponenttipo React . Indipendentemente da ciò, non monti componenti in React, chiami render che a sua volta potrebbe montare il componente se è necessario creare un nodo DOM effettivo per rappresentare il componente nell'albero DOM. Il montaggio effettivo è l'evento in cui ciò accade per la prima volta.