React.js এ ইনস্ট্যান্স v স্টেটের ভেরিয়েবল

Question

রিঅ্যাক্ট.জেজে, একটি টাইমআউট রেফারেন্সকে উদাহরণ ভেরিয়েবল (এটি.টাইমআউট) বা স্টেট ভেরিয়েবল (this.state.Toutout) হিসাবে সংরক্ষণ করা কি ভাল?

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

— ডেভিড হেলসিং

ডিলে কী সেট করা উচিত?

— justingordon

Answer 1

আমি এটি উদাহরণে এটি সঞ্চয় করার পরামর্শ দিচ্ছি তবে এটিতে নয় state। যখনই stateআপডেট হয় (যা কেবলমাত্র setStateএকটি মন্তব্যে প্রস্তাবিত হিসাবে করা উচিত ), প্রতিক্রিয়া কল করে renderএবং সত্যিকারের ডিওমে কোনও প্রয়োজনীয় পরিবর্তন করে।

যেহেতু এর মানটি timeoutআপনার উপাদানগুলির রেন্ডারিংয়ে কোনও প্রভাব ফেলে না, এটি থাকা উচিত নয় state। এটি সেখানে রাখলে অপ্রয়োজনীয় কল আসবে render।

Answer 2

@ এসোরালালেন যা বলেছে তা ছাড়াও, আপনার হ্যান্ডেললিভের ডাক দেওয়ার আগে আপনাকে আনমাউন্টিং উপাদানটি পরিচালনা করতে হবে তাও মনে রাখা উচিত।

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