Question

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

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

Answer 1

我建议将其存储在实例上，而不是存储在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); 
     },
    ...
});

react.js中的实例v状态变量

2 个答案: