Instanz v Statusvariablen in react.js

Question

In react.js, ist es besser, eine Timeout-Referenz als Instanzvariable (this.timeout) oder als Statusvariable (this.state.timeout) zu speichern?

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); 
    } 
    ... 
}) 

oder

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); 
    } 
    ... 
}) 

beide Ansätze funktionieren. Ich will nur die Gründe wissen, warum ich einen über den anderen verwende.

Answer 1

Ich schlage vor, es auf der Instanz zu speichern, aber nicht in seiner state. Immer wenn state aktualisiert wird (was nur durch setState wie in einem Kommentar vorgeschlagen werden soll), ruft React render auf und nimmt alle erforderlichen Änderungen an dem realen DOM vor.

Da der Wert timeout keine Auswirkungen auf das Rendering Ihrer Komponente hat, sollte es nicht in state leben. Wenn Sie es dort platzieren, würden Sie unnötige Anrufe an render senden.

Answer 2

Zusätzlich zu dem, was @ssorallen sagte, sollten Sie auch daran denken, die Komponente unmounting zu behandeln, bevor Ihr handleLeave aufgerufen wird.

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); 
    }, 
    ... 
});