No react.js, é melhor armazenar uma referência de tempo limite como uma variável de instância (this.timeout) ou uma variável de estado (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);
}
...
})
ou
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);
}
...
})
ambas as abordagens funcionam. Eu só quero saber as razões para usar um sobre o outro.
javascript
reactjs
brendangibson
fonte
fonte
this.state
diretamente, pois a chamadasetState()
posterior poderá substituir a mutação que você fez. Tratethis.state
como se fosse imutável."this.timeout = setTimeout(this.openWidget, DELAY);
Respostas:
Sugiro armazená-lo na instância, mas não na sua
state
. Sempre questate
é atualizado (o que deve ser feito apenassetState
conforme sugerido em um comentário), o React chamarender
e faz as alterações necessárias no DOM real.Como o valor de
timeout
não tem efeito na renderização do seu componente, ele não deve residirstate
. Colocá-lo lá causaria chamadas desnecessárias pararender
.fonte
Além do que o @ssorallen disse, você também deve se lembrar de lidar com a desmontagem do componente antes que o handleLeave seja chamado.
fonte