2015-12-29 22 views
19

Sto cercando di capire la differenza esatta tra i componenti stateful e stateless di React. Ok, i componenti stateless fanno semplicemente qualcosa, ma non ricordano nulla, mentre i componenti stateful possono fare lo stesso, ma ricordano cose all'interno di this.state. Questa è la teoria.ReactJS differenza tra stateful e stateless

Ma ora, controllando come mostrare questo codice usando, ho un piccolo problema a fare la differenza. Ho ragione con i seguenti due esempi? L'unica differenza è la definizione della funzione getInitialState.

Esempio di un componente stateless:

var React = require('react'); 

var Header = React.createClass({ 
    render: function() { 
     return(
      <img src={'mypicture.png'} /> 
     ); 
    } 
}); 

module.exports = Header; 

Esempio di un componente stateful:

var React = require('react'); 

var Header = React.createClass({ 

    getInitialState: function() { 
     return { 
      someVariable: "I remember something" 
     }; 
    }, 

    render: function() { 
     return(
      <img src={'mypicture.png'} /> 
     ); 
    } 
}); 

module.exports = Header; 

risposta

22

Sì, che è una sorta di differenza. Tranne che con la stateful componente è anche possibile cambiamento dello stato, usando this.setState ad esempio:

var React = require('react'); 

var Header = React.createClass({ 

    getInitialState: function() { 
     return { 
      imageSource: "mypicture.png" 
     }; 
    }, 

    changeImage: function() { 

     this.setState({imageSource: "differentpicture.png"}); 
    }, 

    render: function() { 
     return(
      <img src={this.state.imageSource} onClick={this.changeImage.bind(this)} /> 
     ); 
    } 
}); 

module.exports = Header; 

Così, nell'esempio di cui sopra, la changeImagegestisce lo stato del componente (che sarebbe anche la causa tutti i componenti figlio/dipendenti da ri-rendering).

Da qualche parte nell'applicazione, è necessario associare i dati o ricordare le cose. I componenti stateless sono stupidi (e questo è buono), non possono ricordare e non possono dare contesto ad altre parti dell'interfaccia utente. I componenti stateful forniscono il contesto necessario colla.

D'altra parte, i componenti senza stato solo ottenere contesto passato (di solito attraverso this.props:

var React = require('react'); 

var Header = React.createClass({ 
    render: function() { 
     return(
      <img src={this.props.imageSource} /> 
     ); 
    } 
}); 

ReactDOM.render(<Header imageSource="myImage.png"/>, document.body); 

Nell'esempio di cui sopra, si può vedere che durante la render, imageSource viene passato come un attributo ed è quindi aggiunto ai componenti stateless this.props oggetto.

1

In una semplice definizione può essere spiegato come

Se il comportamento di un componente dipende dalla st mangiato del componente quindi può essere definito come componente stateful e se il comportamento è indipendente dal suo stato, allora può essere un componente stateless.

Quando qualcosa è "stato", è un punto centrale che memorizza le informazioni in memoria sullo stato dell'app/componente. Quando qualcosa è "stateless", calcola il suo stato interno ma non lo modifica mai direttamente.

I componenti stateless sono a volte indicato come componenti muti

Il vantaggio principale stateless attraverso componente stateful è scalabilità e la riutilizzabilità.