В 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);
}
...
})
оба этих подхода работают. Я просто хочу узнать причины использования одного над другим.
Я предлагаю хранить его на экземпляре, но не в state. Всякий раз, когда state обновляется (что должно выполняться только setState, как предложено в комментарии), React вызывает render и делает любой необходимые изменения в реальном DOM.
Поскольку значение timeout не влияет на рендеринг вашего компонента, оно не должно проживать в state. Помещение туда приведет к ненужным вызовам render.
В дополнение к тому, что сказал @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);
},
...
});