Qual è la differenza tra componentWillMount e componentDidMount in ReactJS?

Ho guardato la documentazione di Facebook su ( React.Component ) e menziona come componentWillMountviene invocato sul client / server mentre componentDidMountviene invocato solo sul client. Cosa fa componentWillMountal server?

componentWillMount è essenzialmente il costruttore. Puoi impostare le proprietà dell'istanza che non influiscono sul rendering, estrarre i dati da un archivio in modo sincrono e impostareState con esso e altro semplice codice senza effetti collaterali che devi eseguire durante la configurazione del componente.

È raramente necessario e per niente con le classi ES6.

il constructormetodo non è lo stesso di componentWillMount.

Secondo l'autore di Redux, è rischioso inviare azioni dal costruttore perché potrebbe provocare la modifica dello stato durante il rendering.

Tuttavia, la spedizione da componentWillMountva bene.

dal problema di GitHub :

Ciò accade quando dispatch () all'interno del costruttore di un componente provoca un setState () all'interno di un altro componente. React tiene traccia del "proprietario corrente" per tali avvertimenti e pensa che stiamo chiamando setState () all'interno del costruttore quando tecnicamente il costruttore causa un setState () all'interno di qualche altra parte dell'applicazione. Non penso che dovremmo gestirlo - è solo React che fa del suo meglio per fare il suo lavoro. La soluzione è, come hai correttamente notato, inviare invece () all'interno di componentWillMount ().

Per aggiungere a ciò che ha detto FakeRainBrigand, componentWillMountviene chiamato durante il rendering di React sul server e sul client, ma componentDidMountviene chiamato solo sul client.

componentWillMountviene eseguito prima dell'INIZIALE renderdi un componente e viene utilizzato per valutare gli oggetti di scena e fare qualsiasi logica aggiuntiva basata su di essi (di solito anche per aggiornare lo stato), e come tale può essere eseguito sul server per ottenere il primo markup renderizzato lato server .

componentDidMountviene eseguito DOPO l'iniziale renderquando il DOM è stato aggiornato (ma in modo cruciale PRIMA che questo aggiornamento del DOM venga dipinto nel browser, consentendo di eseguire tutti i tipi di interazioni avanzate con il DOM stesso). Questo ovviamente può accadere solo nel browser stesso e quindi non avviene come parte di SSR, poiché il server può generare solo markup e non il DOM stesso, questo viene fatto dopo che è stato inviato al browser se si utilizza SSR

Interazioni avanzate con il DOM dici? Whaaaat ?? ... Sì - a questo punto poiché il DOM è stato aggiornato (ma l'utente non ha ancora visto l'aggiornamento nel browser) è possibile intercettare la pittura effettiva sullo schermo usando window.requestAnimationFramee quindi fare cose come misurare l'effettivo Elementi DOM che verranno emessi, a cui è possibile eseguire ulteriori cambi di stato, super utili ad esempio animando ad un'altezza di un elemento che ha contenuti di lunghezza variabile sconosciuti (poiché ora puoi misurare i contenuti e assegnare un'altezza all'animazione), o per evitare flash di scenari di contenuto durante alcuni cambiamenti di stato.

Stai molto attento però a proteggere i cambiamenti di stato in qualsiasi componentDid...altro modo altrimenti può causare un ciclo infinito perché un cambiamento di stato causerà anche un nuovo rendering, e quindi un altro componentDid...e ancora e ancora e ancora

Come da documentazione ( https://facebook.github.io/react/docs/react-component.html )

I metodi con prefisso will vengono chiamati subito prima che accada qualcosa e

I metodi con prefisso did sono chiamati r ight dopo che è successo qualcosa.

componentWillMount https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

C'è un "gotcha", però: una chiamata asincrona per recuperare i dati non tornerà prima che avvenga il rendering. Ciò significa che il componente verrà renderizzato con dati vuoti almeno una volta.

Non è possibile "sospendere" il rendering per attendere l'arrivo dei dati. Non è possibile restituire una promessa da componentWillMount o disputare in un setTimeout in qualche modo.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/premounting_with_componentwillmount.html

il nostro componente non avrà accesso all'interfaccia utente nativa (DOM, ecc.). Inoltre, non avremo accesso agli arbitri bambini, perché non sono ancora stati creati. Il componentWillMount () è un'opportunità per noi di gestire la configurazione, aggiornare il nostro stato e in generale prepararci per il primo rendering. Ciò significa che possiamo iniziare a eseguire calcoli o processi basati sui valori di prop.

Caso d'uso per il componenteWillMount ()

Ad esempio, se si desidera mantenere la data di quando il componente è stato creato nello stato del componente, è possibile impostarlo con questo metodo. Tieni presente che l'impostazione dello stato in questo metodo non eseguirà nuovamente il rendering di DOM. Questo è importante da tenere a mente, perché nella maggior parte dei casi ogni volta che cambiamo lo stato del componente, viene attivato un nuovo rendering.

componentWillMount() {
  this.setState({ todayDate: new Date(Date.now())});
}

Caso d'uso per componentDidMount ()

Ad esempio, se stavi creando un'app di notizie che recupera i dati sulle notizie correnti e le visualizza all'utente e potresti volere che questi dati vengano aggiornati ogni ora senza che l'utente debba aggiornare la pagina.

componentDidMount() {
  this.interval = setInterval(this.fetchNews, 3600000);
}

ComponentDidMount()Il metodo cambia solo la pagina corrente nei componenti di classe, ma ComponentWillMount()cambia tutte le pagine interessate dasetStates()