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

121

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

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

javascript reactjs

— 布伦丹吉布森
source

13

从文档中可以得出以下结论：“ 切勿this.state直接进行突变，因为setState()随后的调用可能会替换您所做的突变。将其this.state视为不可变的。”

— Felix Kling 2014年

6

提示：使用React的自动绑定：this.timeout = setTimeout(this.openWidget, DELAY);

— David Hellsing

1

延迟应设置为什么？

— justingordon 2014年

171

我建议将其存储在实例上，而不是存储在实例中state。每当state更新时（应仅按setState注释中的建议完成），React就会调用render并对实际DOM进行任何必要的更改。

由于的值对timeout组件的呈现没有影响，因此不应存在于中state。将其放在那里会导致对的不必要调用render。

— 罗斯·艾伦
source

12

除了@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); 
     },
    ...
});

— 旅团
source