Instance v राज्य वेरिएबल्स react.js में

Question

React.js में, उदाहरण के चर (this.time) या राज्य चर (this.state.time) के रूप में टाइमआउट संदर्भ को संग्रहीत करना बेहतर है?

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

ये दोनों दृष्टिकोण काम करते हैं। मैं सिर्फ एक को दूसरे पर प्रयोग करने के कारणों को जानना चाहता हूं।

Comments

से प्रलेखन : " कभी नहीं में बदलें this.stateसीधे, कॉल करने जैसा setState()बाद में उत्परिवर्तन की जगह ले सकती आप ट्रीट कर दिया। this.stateजैसे कि वह अडिग रहे थे।"

— फेलिक्स क्लिंग

युक्ति: रिएक्ट के ऑटोबाइंडिंग का उपयोग करें:this.timeout = setTimeout(this.openWidget, DELAY);

— डेविड हेलसिंग

DELAY को क्या सेट करना चाहिए?

— justingordon

Answer 1

मैं इसे उदाहरण पर संग्रहीत करने का सुझाव देता हूं लेकिन इसमें नहीं state। जब भी stateअपडेट किया जाता है (जो केवल setStateएक टिप्पणी में सुझाव के अनुसार किया जाना चाहिए ), रिएक्ट कॉल करता है renderऔर वास्तविक डोम में कोई आवश्यक परिवर्तन करता है।

क्योंकि timeoutआपके घटक के प्रतिपादन पर मूल्य का कोई प्रभाव नहीं पड़ता है, इसलिए इसमें नहीं रहना चाहिए state। इसे वहां रखने से अनावश्यक कॉल्स आएंगी render।

Answer 2

@Ssorallen ने जो कहा, इसके अलावा, आपको अपने हैंडललेव को कॉल करने से पहले घटक को संभालना भी याद रखना चाहिए।

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