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

IT技术 javascript reactjs
2021-04-13 16:24:54

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

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

2个回答

我建议将它存储在实例上,而不是在它的state. 每当state更新时(应该只按照setState评论中的建议来完成),React 调用render并对真实 DOM 进行任何必要的更改。

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

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