कार्यात्मक सेटस्टेट का उपयोग कब करें

रिएक्ट का सेटस्टेट फ़ंक्शन घटक स्थिति को अपडेट करने के लिए दो सिंटैक्स प्रदान करता है: प्रत्यक्ष असाइनमेंट सिंटैक्स और कार्यात्मक अपडेटर सिंटैक्स।

प्रत्यक्ष असाइनमेंट सिंटैक्स:

this.setState({pictures: pics})

यह सिंटैक्स सीधा और उपयोग में आसान है। यह सीधे मौजूदा राज्य मान को प्रदान किए गए नए मान से बदल देता है। हालाँकि, यदि राज्य मान का उपयोग कई स्थानों पर किया जाता है या घटक के जीवनचक्र विधियों के भीतर हेरफेर किया जाता है, तो इससे संभावित समस्याएं हो सकती हैं।

कार्यात्मक अपडेटर सिंटैक्स:

this.setState(prevState => ({
  pictures: prevState.pictures.concat(pics)
}))

कार्यात्मक अद्यतनकर्ता सिंटैक्स को प्राथमिकता दी जाती है क्योंकि यह सुनिश्चित करता है कि राज्य अद्यतन सुसंगत और पूर्वानुमानित है। यह पिछली स्थिति को एक तर्क के रूप में लेता है और अद्यतन स्थिति लौटाता है। यह आकस्मिक स्थिति उत्परिवर्तन को रोकता है और सुनिश्चित करता है कि स्थिति हमेशा अद्यतित रहे। जब एकाधिक कॉल एक ही स्थिति कुंजी को अद्यतन करने का प्रयास करते हैं तो प्रत्यक्ष असाइनमेंट सिंटैक्स विलय संबंधी समस्याओं के प्रति संवेदनशील होता है। उदाहरण के लिए:

this.setState({चित्र: this.state.pictures.concat(pics1)}) this.setState({चित्र: this.state.pictures.concat(pics2)})कार्यात्मक अपडेटर सिंटैक्स स्वचालित रूप से अपडेट को सही ढंग से मर्ज करता है, जिसके परिणामस्वरूप अंतिम स्थिति pics1 और pics2 दोनों को दर्शाती है।

this.setState({pictures: this.state.pictures.concat(pics1)})
this.setState({pictures: this.state.pictures.concat(pics2)})

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