React.js'deki örnek v durum değişkenleri

React.js'de, bir zaman aşımı referansını bir örnek değişkeni (this.timeout) veya bir durum değişkeni (this.state.timeout) olarak saklamak daha mı iyidir?

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

veya

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

bu yaklaşımların her ikisi de işe yarar. Sadece birini diğerinin üzerine kullanmanın nedenlerini bilmek istiyorum.

Örnekte saklamanızı öneririm ama içinde değil state. Ne zaman stategüncellendiğinde (yalnızca setStatebir yorumda önerildiği gibi yapılmalıdır ), React arar renderve gerçek DOM'da gerekli değişiklikleri yapar.

Değerinin timeoutbileşeninizin işlenmesi üzerinde hiçbir etkisi olmadığından, bileşeninizin içinde yaşamaması gerekir state. Oraya koymak gereksiz aramalara neden olur render.

@Ssorallen'in söylediği şeye ek olarak, handleLeave çağrılmadan önce bileşeni kaldırmayı da unutmamalısınız.

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