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

Jawaban:

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