2016-07-01 13 views
18

Se si dispone di un componente React che richiede alcune impostazioni (ad esempio per i timer, o API WebAudio, ecc.), Ho difficoltà a decidere se l'inizializzazione dovrebbe andare in constructor o componentWillMount. C'è qualche vantaggio o svantaggio per entrambi? Non mi è chiaro quale sia il posto migliore per questo.Quali tipi di inizializzazione sono più appropriati in costruttore vs componenteWillMount?

I Ho cercato un po 'su Google per vedere se qualcuno aveva discusso le differenze tra constructor e componentWillMount ma non ho trovato nulla.

MODIFICA: il riduttore e qualsiasi funzione asincrona non devono far parte dell'equazione.

+0

Per la documentazione, questo dovrebbe andare in 'componentDidMount': https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount" Se si desidera .... impostare i timer. .. o setInterval ... esegui queste operazioni con questo metodo. " – lux

risposta

17

Normalmente l'unica cosa che si fa nel costruttore è assegnare il tuo iniziale this.state se il componente è stateful. Non dovresti fare nient'altro nel costruttore.

componentWillMount non è generalmente necessario. Direi che nella maggior parte dei casi il suo uso è un anti-modello. Una ragione per cui le persone lo usano è per aggiornare lo stato da una fonte esterna un'ultima volta prima del rendering, ma tecnicamente assegnarlo nel costruttore è equivalente. L'unica piccola comodità che offre è che puoi inserire setState all'interno ma non puoi farlo all'interno del costruttore.

Per qualsiasi effetto collaterale (recupero di dati o manipolazione DOM) è necessario utilizzare componentDidMount.

+0

Sembra che se creo un componente di ordine superiore, ho bisogno di impostare le cose in 'componentWillMount'. Proprio come un test, ho rinominato 'WillMount' in' DidMount' e ho ricevuto un errore nel mio componente spostato su un oggetto non esistente (che è passato dallo stato dell'HOC). Forse gli HOC sono un caso speciale in cui 'componentWillMount' è un posto migliore per inizializzarsi e uno deve impostare lo stato in base a un mucchio di codice in esecuzione? (in particolare riferimento a [questo codice] (https://github.com/ffxsam/formous/blob/master/src/index.js#L35-L62)) – ffxsam

+1

Non c'è differenza se si costruisce un HOC o no. HOC è solo una funzione che restituisce un componente. Questo componente non è diverso da altri componenti e pertanto valgono le stesse regole. Nel tuo codice, vuoi spostare la logica per calcolare lo stato iniziale nel tuo costruttore. Invece di chiamare 'setState' lo assegneresti a' this.state'. –

+0

Ah, quindi il costruttore è un luogo appropriato per tutto il codice di installazione. Non ero sicuro Ho continuato ad andare avanti e indietro se apparteneva a 'costruttore' o' componenteDidMount' .. quindi questo post. :) Quindi, capisco perché la manipolazione DOM non funziona nel costruttore, ma cosa c'è di sbagliato nel recupero dei dati? – ffxsam

1

Se si desidera chiamare un'azione di flusso (per chiamate ajax) utilizzare componentWillMount o componentDidMount.

È possibile inizializzare stato nel costruttore