Instanz-v-Zustandsvariablen in „react.js“.

Lesezeit: 2 Minuten

Benutzer-Avatar
brendangibson

Ist es in React.js besser, eine Timeout-Referenz als Instanzvariable (this.timeout) oder als Zustandsvariable (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 möchte nur die Gründe für die Verwendung eines über dem anderen wissen.

  • Von dem Dokumentation: NOCH NIE mutieren this.state direkt, als Anruf setState() danach kann die von Ihnen vorgenommene Mutation ersetzt werden. Behandeln this.state als ob es unveränderlich wäre.”

    – Felix Klinge

    8. August 2014 um 16:12 Uhr


  • Tipp: Verwenden Sie die automatische Bindung von React: this.timeout = setTimeout(this.openWidget, DELAY);

    – David Hellsing

    8. August 2014 um 21:05 Uhr

  • Was sollte DELAY eingestellt werden?

    – justingordon

    15. Dezember 2014 um 19:39 Uhr

Benutzer-Avatar
Ross Allen

Ich schlage vor, es auf der Instanz zu speichern, aber nicht in seiner state. Wann auch immer state aktualisiert wird (was nur von getan werden sollte setState wie in einem Kommentar vorgeschlagen), React-Aufrufe render und nimmt alle notwendigen Änderungen am realen DOM vor.

Denn der Wert von timeout hat keinen Einfluss auf das Rendern Ihrer Komponente, es sollte nicht darin leben state. Wenn Sie es dort ablegen, werden unnötige Anrufe verursacht render.

Zusätzlich zu dem, was @ssorallen gesagt hat, sollten Sie auch daran denken, das Unmounten der Komponente 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); 
     },
    ...
});

1246420cookie-checkInstanz-v-Zustandsvariablen in „react.js“.

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy