Exemple v variables d'état dans react.js

Dans react.js est-il préférable de stocker un délai d'attente de référence comme une variable d'instance (ce.délai d'attente) ou une variable d'état (ce.état.délai d'attente)?

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

ou

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

ces deux approches de travail. Je veux juste savoir les raisons de l'utilisation de l'un sur l'autre.

  • À partir de la documentation: "JAMAIS muter this.state directement, comme l'appel à setState() après peut remplacer la mutation que vous avez fait. Traiter this.state comme si elle était immuable."
  • Astuce: Utilisez Réagir de autobinding: this.timeout = setTimeout(this.openWidget, DELAY);
  • Ce qui devrait être immédiatement mis à l'?
InformationsquelleAutor brendangibson | 2014-08-08
  1. 158

    Je suggère de les stocker sur l'instance, mais pas dans son state. Chaque fois que state est mis à jour (ce qui devrait être fait seulement par setState comme suggéré dans un commentaire), Réagir à des appels render et apporte les changements nécessaires à la vraie DOM.

    Parce que la valeur de timeout n'a aucun effet sur le rendu de votre composant, il ne devrait pas vivre dans state. Mettre qu'il y aurait de provoquer des appels inutiles à render.

    InformationsquelleAutor Ross Allen
  2. 11

    En plus de ce que @ssorallen dit, vous devez également vous rappeler à manipuler le composant avant de démonter votre handleLeave est appelé.

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