Переменные состояния экземпляра v в реакции .js

В response.js, лучше ли хранить ссылку на тайм-аут в качестве переменной экземпляра (this.timeout) или переменной состояния (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); 
     }
    ...
})

или

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

оба этих подхода работают. Я просто хочу узнать причины использования одного над другим.

Ответ 1

Я предлагаю хранить его на экземпляре, но не в state. Всякий раз, когда state обновляется (что должно выполняться только setState, как предложено в комментарии), React вызывает render и делает любой необходимые изменения в реальном DOM.

Поскольку значение timeout не влияет на рендеринг вашего компонента, оно не должно проживать в state. Помещение туда приведет к ненужным вызовам render.

Ответ 2

В дополнение к тому, что сказал @ssorallen, вы также должны помнить о том, чтобы обрабатывать размонтирование компонентов до вызова handleLeave.

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