Variabel status instance v di react.js

121

Di react.js, apakah lebih baik menyimpan referensi batas waktu sebagai variabel instan (this.timeout) atau variabel status (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); 
     }
    ...
})

atau

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

kedua pendekatan ini berhasil. Saya hanya ingin mengetahui alasan penggunaan salah satu alasan tersebut.

javascript reactjs

— brendangibson
sumber

13

Dari dokumentasi : " JANGAN PERNAH bermutasi this.statesecara langsung, karena menelepon setState()setelahnya dapat menggantikan mutasi yang Anda buat. Perlakukan this.stateseolah-olah mutasi itu tidak berubah."

— Felix Kling

6

Tip: Gunakan autobinding React:this.timeout = setTimeout(this.openWidget, DELAY);

— David Hellsing

1

Apa yang harus disetel DELAY?

— justingord

171

Saya sarankan menyimpannya di instance tetapi tidak di dalamnya state. Kapan statepun diperbarui (yang seharusnya hanya dilakukan olehsetState seperti yang disarankan dalam komentar), React memanggil renderdan membuat perubahan yang diperlukan pada DOM asli.

Karena nilai timeouttidak berpengaruh pada rendering komponen Anda, seharusnya tidak ada state. Menempatkannya di sana akan menyebabkan panggilan yang tidak perlu render.

— Ross Allen
sumber

12

Selain apa yang dikatakan @ssorallen, Anda juga harus ingat untuk menangani pelepasan komponen sebelum handleLeave dipanggil.

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

— Perampok
sumber