Istanza v variabili di stato in react.js

121

In react.js, è meglio memorizzare un riferimento di timeout come variabile di istanza (this.timeout) o come variabile di stato (this.state.timeout)?

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         var self = this;
         this.timeout = setTimeout(function () {
             self.openWidget();
         }, DELAY);
     },
     handleLeave: function () {
        // Clear the timeout for opening the widget
        clearTimeout(this.timeout); 
     }
    ...
})

o

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         var self = this;
         this.state.timeout = setTimeout(function () {
             self.openWidget();
         }, DELAY);
     },
     handleLeave: function () {
        // Clear the timeout for opening the widget
        clearTimeout(this.state.timeout); 
     }
    ...
})

entrambi questi approcci funzionano. Voglio solo conoscere i motivi per utilizzare uno sull'altro.

javascript reactjs

— brendangibson
fonte

13

Dalla documentazione : " NON mutare MAIthis.state direttamente, perché chiamare in setState()seguito potrebbe sostituire la mutazione che hai fatto. Trattalo this.statecome se fosse immutabile."

— Felix Kling

6

Suggerimento: usa l'autobinding di React:this.timeout = setTimeout(this.openWidget, DELAY);

— David Hellsing

1

Su cosa dovrebbe essere impostato DELAY?

— justingordon

171

Suggerisco di memorizzarlo nell'istanza ma non nel suo state. Ogni volta che stateviene aggiornato (cosa che dovrebbe essere eseguita solo setStatecome suggerito in un commento), React chiama rendere apporta le modifiche necessarie al DOM reale.

Poiché il valore di timeoutnon ha alcun effetto sul rendering del componente, non dovrebbe vivere state. Metterlo lì causerebbe chiamate non necessarie a render.

— Ross Allen
fonte

12

Oltre a ciò che ha detto @ssorallen, dovresti anche ricordarti di gestire lo smontaggio del componente prima che il tuo handleLeave venga chiamato.

React.createClass({
     handleEnter: function () {
         // Open a new one after a delay
         this._timeout = setTimeout(function () {
             this.openWidget();
         }.bind(this), DELAY);
     },
     handleLeave: function () {
        // Clear the timeout for opening the widget
        clearTimeout(this._timeout); 
     },
     componentWillUnmount: function(){
        // Clear the timeout when the component unmounts
        clearTimeout(this._timeout); 
     },
    ...
});

— Brigante
fonte