实例v中的react.js中的状态variables

在react.js中，将超时引用存储为实例variables（this.timeout）还是状态variables（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); } ... }) 

这两种方法都有效。 我只想知道使用其中一个的原因。

Answer 1

我build议将其存储在实例中，而不是其state 。 每当state被更新时（只能通过setState来完成），React调用render ，并对真实的DOM进行必要的修改。

因为timeout的值对组件的渲染没有影响，所以它不应该处于state 。 把它放在那里会导致不必要的调用render 。

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