React esegue nuovamente il rendering di tutti i componenti e componenti secondari ogni volta che setState
viene chiamato?
Se è così, perché? Pensavo che l'idea di React fosse resa minima quanto basta - quando lo stato è cambiato.
Nel seguente semplice esempio, entrambe le classi vengono visualizzate nuovamente quando si fa clic sul testo, nonostante il fatto che lo stato non cambi sui clic successivi, poiché il gestore onClick imposta sempre state
lo stesso valore:
this.setState({'test':'me'});
Mi sarei aspettato che i rendering sarebbero avvenuti solo se i state
dati fossero cambiati.
Ecco il codice dell'esempio, come JS Fiddle , e snippet incorporato:
var TimeInChild = React.createClass({
render: function() {
var t = new Date().getTime();
return (
<p>Time in child:{t}</p>
);
}
});
var Main = React.createClass({
onTest: function() {
this.setState({'test':'me'});
},
render: function() {
var currentTime = new Date().getTime();
return (
<div onClick={this.onTest}>
<p>Time in main:{currentTime}</p>
<p>Click me to update time</p>
<TimeInChild/>
</div>
);
}
});
ReactDOM.render(<Main/>, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
[1]: http://jsfiddle.net/fp2tncmb/2/
setState()
anche con dati fittizi provoca il rendering dell'elemento in modo diverso, quindi direi di sì. Assolutamente dovrebbe provare a ri-renderizzare il tuo oggetto quando qualcosa potrebbe essere cambiato perché altrimenti la tua demo - supponendo che fosse il comportamento previsto - non funzionerebbe!
shouldComponentUpdate
metodo, che suppongo che una versione semplice di esso debba già essere inclusa in React stesso. Sembra che la versione predefinita inclusa in reag semplicemente ritorni true
, il che forza il componente a eseguire nuovamente il rendering ogni volta.