Qual è lo scopo di avere funzioni come componentWillMount in React.js?

Question

Recentemente ho scritto componenti in React.js. Non ho mai dovuto usare metodi come componentWillMount e componentDidMount.

render è indispensabile. getInitialState e altri metodi di supporto che ho scritto sono utili. Ma non i due metodi di ciclo di vita di cui sopra.

La mia ipotesi corrente è che vengano utilizzati per il debug? Posso console.log fuori al loro interno:

componentWillMount: function() { 
    console.log('component currently mounting'); 
}, 

componentDidMount: function() { 
    console.log('component has mounted'); 
} 

Ci sono altri usi?

Answer 1

componentDidMount è utile se si desidera utilizzare alcuni plug-in JavaScript non React. Ad esempio, c'è una mancanza di un buon raccoglitore di date in React. Pickaday è bellissimo e funziona semplicemente fuori dagli schemi. Quindi il mio componente DateRangeInput sta ora utilizzando Pickaday per l'ingresso di inizio e fine data e l'ho collegato in su in questo modo:

componentDidMount: function() { 
    new Pikaday({ 
     field: React.findDOMNode(this.refs.start), 
     format: 'MM/DD/YYYY', 
     onSelect: this.onChangeStart 
    }); 

    new Pikaday({ 
     field: React.findDOMNode(this.refs.end), 
     format: 'MM/DD/YYYY', 
     onSelect: this.onChangeEnd 
    }); 
    }, 

Il DOM deve essere reso per Pikaday da collegare ad esso e il gancio componentDidMount consente di gancio in quell'esatto evento.

componentWillMount è utile quando si desidera eseguire un'operazione in modo programmatico subito prima del montaggio del componente. Un esempio in un codebase su cui sto lavorando è un mixin che ha un mucchio di codice che altrimenti verrebbe duplicato in una serie di diversi componenti del menu. componentWillMount viene utilizzato per impostare lo stato di uno specifico attributo condiviso. Un altro modo componentWillMount potrebbe essere utilizzato è quello di impostare un comportamento del componente ramificazione dal prop (s):

componentWillMount() { 
    let mode; 
    if (this.props.age > 70) { 
     mode = 'old'; 
    } else if (this.props.age < 18) { 
     mode = 'young'; 
    } else { 
     mode = 'middle'; 
    } 
    this.setState({ mode }); 
    } 

Answer 2

componentDidMount corre una sola volta e sul lato client. Questo è importante, specialmente se stai scrivendo un'app isomorfa (funziona sia sul client che sul server). È possibile utilizzare componentDidMount per eseguire attività che richiedono l'accesso alla finestra o al DOM.

da Facebook di Reagire Pagina

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method. 

componentWillMount ha meno casi d'uso (io in realtà non lo uso), ma si differenzia in quanto viene eseguito sia sul lato client e server. Probabilmente non vuoi mettere qui listener di eventi o manipolazioni DOM, poiché proverà ad eseguire sul server senza motivo.

Answer 3

Questo è un esempio di un'applicazione web isomorfica che fa uso di componentWillMount: https://github.com/coodoo/react-redux-isomorphic-example

Tuttavia, sono certo al 99% che venga eseguito il codice all'interno componentWillMount per nessun motivo sul lato server (credo usando componentDidMount per assicurarsi che fosse eseguito solo lato client avrebbe avuto più senso) come il codice che garantisce che le promesse di recupero siano soddisfatte prima di rendere la pagina in server.js non all'interno dei singoli componenti.

C'è discussione per componente asincrono il recupero qui: https://github.com/facebook/react/issues/1739 Per quanto posso dire, non c'è un caso d'uso buono per componentWillMount quanto isomorfismo è interessato almeno.

Answer 4

Nel mio progetto che è uno strumento di dashboard, ho usato componentDidMount().

Nella home page sono visualizzati i dashboard precedentemente salvati nella barra laterale. Eseguo una chiamata ajax all'interno di componentDidMount() della home page di rendering dei componenti, in modo da recuperare l'elenco dei dashboard in modo asincrono dopo il rendering della pagina.

Answer 5

Perché React Life Cycle Methods?

intende utilizzare terze parti biblioteca (Ex d3.js) con Reagire Componente

---

class Example extends React.component{ 
    constructor(){ 
    // init state 
    // will be called only once 
    } 
    componentWillMount(){ 
    // will be called only once 
    // will not be triggered when re-rendering 
    // usually will fetch data that is needed in order 
    // to render properly from other API 
    } 
    shouldComponentUpdate(){ 
     return false 
     // will not re-render itself after componentDidMount(){} 
    } 
    render(){ 
    return (
     <div id="chart"></div> 
    ) 
    } 
    componentDidMount(){ 
    d3.select(".chart") 
     .selectAll("p") 
     // d3.js ........ 
     // d3.js ........ 
     // Usually, this will trigger React to re-render itself, 
     // but this time will not because we have set 
     // shouldComponentUpdate to false 
    } 
} 

Perché Reagire vuole fare questo?

Poiché il rendering del DOM è un'operazione costosa, React utilizza il livello del DOM virtuale per aggiornare solo DOM/DOM che sono/sono diversi dallo stato precedente.