reactjs - रिएक्ट सेटस्टैट कॉलबैक का उपयोग कब करें




callback setstate (3)

1. usecase जो मेरे दिमाग में आता है, एक api कॉल है, जिसे रेंडर में नहीं जाना चाहिए, क्योंकि यह आपके राज्य परिवर्तन के लिए चलेगा। और एपीआई कॉल केवल विशेष राज्य परिवर्तन पर किया जाना चाहिए, और हर रेंडर पर नहीं।

changeSearchParams = (params) => {
  this.setState({ params }, this.performSearch)
} 

performSearch = () => {
  API.search(this.state.params, (result) => {
    this.setState({ result })
  });
}

इसलिए किसी भी राज्य परिवर्तन के लिए, रेंडर मेथड बॉडी में एक क्रिया की जा सकती है।

बहुत बुरा अभ्यास , क्योंकि render -मिथोड शुद्ध होना चाहिए, इसका मतलब है कि कोई भी कार्रवाई नहीं, राज्य में परिवर्तन, एपीआई कॉल, प्रदर्शन किया जाना चाहिए, बस अपने विचार को मिलाएं और इसे वापस करें। कुछ घटनाओं पर ही कार्रवाई की जानी चाहिए। रेंडर एक घटना नहीं है, लेकिन उदाहरण के लिए घटकडिमाउंट।

जब एक प्रतिक्रिया घटक स्थिति बदलता है, तो रेंडर विधि कहा जाता है। इसलिए किसी भी राज्य परिवर्तन के लिए, रेंडर मेथड बॉडी में एक क्रिया की जा सकती है। क्या तब सेटस्टैट कॉलबैक के लिए कोई विशेष उपयोग मामला है?


सेटस्टैट कॉल पर विचार करें

this.setState({ counter: this.state.counter + 1 })

विचार १

setState को async फ़ंक्शन में कहा जा सकता है

इसलिए आप this पर भरोसा नहीं कर सकते। यदि उपरोक्त कॉल एक async फ़ंक्शन के अंदर की गई थी, तो यह उस समय घटक की स्थिति को संदर्भित करेगा, लेकिन हमें उम्मीद है कि यह समय के भीतर राज्य के अंदर संपत्ति को संदर्भित करने के लिए कॉल करेगा या async कार्य की शुरुआत। और जैसा कि कार्य async कॉल था इस प्रकार संपत्ति समय में बदल सकती है। इस प्रकार राज्य की कुछ संपत्तियों को संदर्भित करने के लिए this कीवर्ड का उपयोग करना अविश्वसनीय है, this प्रकार हम कॉलबैक फ़ंक्शन का उपयोग करते हैं, जिनके तर्क पिछलेस्टेट और प्रॉप्स हैं, जिसका अर्थ है कि जब async कार्य किया गया था और यह सेटस्टैट कॉल का उपयोग करके स्थिति को अपडेट करने का समय था तब प्रीस्टेट राज्य का उल्लेख करेगा जब अब setState अभी तक शुरू नहीं हुआ है। विश्वसनीयता सुनिश्चित करना कि नेक्स्टस्टेट दूषित नहीं होगा।

गलत कोड: डेटा के भ्रष्टाचार को जन्म देगा

this.setState(
   {counter:this.state.counter+1}
 );

सेटस्टैट के साथ सही कोड कॉल बैक फ़ंक्शन:

 this.setState(
       (prevState,props)=>{
           return {counter:prevState.counter+1};
        }
    );

इस प्रकार जब भी हमें अपनी वर्तमान स्थिति को अगले राज्य में अपडेट करना होता है, तो अभी संपत्ति पर आधारित मूल्य के आधार पर और यह सब async फैशन में हो रहा है, कॉलबैक फ़ंक्शन के रूप में setState का उपयोग करना अच्छा है।

विचार २

SetState कॉल async ही हो सकती है bcz React प्रदर्शन सुधार के लिए एक साथ दो या अधिक setState कॉल को संयोजित करने का प्रयास कर सकता है। वैसे भी जो अविश्वसनीय है । मान लीजिए दो सेटस्टैट कॉल t = 0 पर निकाल दिए जाते हैं। वे दोनों कॉल करने से पहले एक ही राज्य (State_0) का जिक्र कर रहे थे, async होने के कारण हम भरोसा नहीं कर सकते कि कौन पहले खत्म होगा। मान लीजिए कि किसी एक कॉल के अंत में स्थिति 1 हो सकती है। और अन्य कॉल जहां राज्य प्रारंभिक राज्य का उल्लेख कर रहा था (State_0) State_3 हो सकता है। और इससे राज्यों और उसके डेटा का भ्रष्टाचार हो सकता है। कॉलबैक का उपयोग करना जहां कॉलबैक फ़ंक्शन के लिए तर्क प्रचलित है, सहारा देता है। यह सुनिश्चित करता है कि यदि उनमें से एक पहले राज्य के लिए अग्रणी होता है_1 , अगला सेटस्टेट हमेशा प्रारंभिक अवस्था के रूप में जाना जाएगा। इस प्रकार हमेशा सुनिश्चित करें कि डेटा दूषित न हो। यह एक साथ सेटस्टैट कहे जाने के कारण डेटा भ्रष्टाचार के लिए बहुत संभावना नहीं है। लेकिन अगर हमें अपने अगले राज्य की आवश्यकता होती है तो आप प्रचलित पर निर्भर हो सकते हैं तो हमेशा कॉलबैक का उपयोग करें।

मैंने इसे यहाँ कोड कोड में समझाने की कोशिश की है कोड पेन


this.setState({
    name:'value' 
},() => {
    console.log(this.state.name);
});






setstate