Ist es in react.js besser, eine Timeout-Referenz als Instanzvariable (this.timeout) oder als Statusvariable (this.state.timeout) zu speichern?
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);
}
...
})
oder
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);
}
...
})
Beide Ansätze funktionieren. Ich möchte nur die Gründe für die Verwendung übereinander kennen.
javascript
reactjs
brendangibson
quelle
quelle
this.state
direkt mutieren , da ein späterer AufrufsetState()
die von Ihnen vorgenommene Mutation ersetzen kann. Behandeln Sie sie so,this.state
als ob sie unveränderlich wäre."this.timeout = setTimeout(this.openWidget, DELAY);
Antworten:
Ich schlage vor, es auf der Instanz zu speichern, aber nicht in seiner
state
. Bei jederstate
Aktualisierung (die nursetState
wie in einem Kommentar vorgeschlagen durchgeführt werden sollte) ruft React aufrender
und nimmt die erforderlichen Änderungen am realen DOM vor.Da der Wert von
timeout
keinen Einfluss auf das Rendering Ihrer Komponente hat, sollte sie nicht verwendet werdenstate
. Wenn Sie es dort ablegen, würde dies zu unnötigen Anrufen führenrender
.quelle
Zusätzlich zu den Aussagen von @ssorallen sollten Sie auch daran denken, das Aufheben der Bereitstellung der Komponente zu behandeln, bevor Ihr handleLeave aufgerufen wird.
quelle