मैं संदर्भ एपीआई का उपयोग कर रहा हूँ और हुक के साथ कार्यात्मक घटकों प्रतिक्रिया कर रहा हूँ। मेरे पास एक कार्यात्मक घटक है ProfileForm.js

इस फ़ाइल के शीर्ष पर मैं useContext को कॉल करता हूं ताकि मैं वर्तमान स्थिति (प्रोफ़ाइल ऑब्जेक्ट्स की एक सरणी) तक पहुंच प्राप्त कर सकूं।

const {state: {userProfiles}, addProfile, removeProfile, editProfile} = useContext(UserProfilesContext);

इस उदाहरण के लिए मैं फ़ंक्शन addProfile पर ध्यान केंद्रित करूंगा। जब उपयोगकर्ता सबमिट बटन पर क्लिक करता है, तो मैं वैश्विक स्थिति/संदर्भ में नई प्रोफ़ाइल जोड़ना चाहता हूं और मैं अद्यतन सूची को AsyncStorage में सहेजना चाहता हूं।

यहाँ मेरा हैंडलर है:

const saveProfileHandler = async(profiles) = >
{
    const {
        firstName, lastName, userPhone, userEmail, userMonth, userDay, userYear,
        userStreet, userCity, userState, userZip,
    }
    = formState.inputValues;

    Keyboard.dismiss();

    if (validateForm()) {
        let month = userMonth;
        let day = userDay;
        if (month.length == = 1) {
            month = `0 $ { userMonth }
            `;
        }
        if (day.length == = 1) {
            day = `0 $ { userDay }
            `;
        }

        const profile = new UserProfile(
            firstName.trim(),
            lastName.trim(),
            userPhone.trim(),
            userEmail.trim(),
            month.trim(),
            day.trim(),
            userYear.trim(),
            userStreet.trim(),
            userCity.trim(),
            userState.trim(),
            userZip.trim(), );

        // add profile to Context object
        addProfile(profile);

        await saveUserProfilesToStorage([... profiles, profile ]);

        navigation.pop();
    }
};

जब मैं addProfile को कॉल करता हूं तो मैं वैश्विक स्थिति/संदर्भ को अपडेट करता हूं, इसलिए मुझे पता है कि रिएक्ट मेरे घटक को फिर से प्रस्तुत करेगा। तो, मेरे पास वास्तव में 2 प्रश्न हैं:

  1. क्या वैश्विक राज्य मूल्य पर भरोसा करना असुरक्षित है जिसे मैंने अभी सहेजा है। मेरा मतलब है, क्या मैं अद्यतन संदर्भ स्थिति का उपयोग कर सकता हूं और इसे AsyncStorage में सहेज सकता हूं या इसे अभी तक अपडेट नहीं किया जाएगा और इस प्रकार अविश्वसनीय होगा?
  2. मेरे द्वारा addProfile को कॉल करने के बाद, क्या बाकी फ़ंक्शन स्टेट अपडेट से री-रेंडरिंग से पहले चलना जारी रखता है, या addProfile बाकी फंक्शन के खत्म होने से पहले कंपोनेंट को फिर से रेंडर करने का कारण बनता है? यदि यह फ़ंक्शन कॉल के बीच में पुन: प्रस्तुत करता है, तो शेष फ़ंक्शन कब निष्पादित होता है?

अग्रिम में धन्यवाद।

0
Jo Momma 15 मार्च 2021, 21:07

1 उत्तर

सबसे बढ़िया उत्तर

यही मैं सीखने में सक्षम था। मैं इसे यहां दूसरों के लिए रखूंगा जो इस पर ठोकर खाते हैं।

यह जानना महत्वपूर्ण है कि रिएक्ट में, सेटस्टेट () एक एसिंक्रोनस फ़ंक्शन है। जावास्क्रिप्ट इंजन मेमोरी हीप और कॉल स्टैक से बना होता है। कॉल स्टैक सभी सिंक्रोनस फ़ंक्शन चलाएगा। जावास्क्रिप्ट इंजन के साथ-साथ वेब एपीआई (ब्राउज़र द्वारा प्रदान की गई) और एक इवेंट लूप (कॉलबैक कतार) हैं।

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

एसिंक्रोनस इवेंट

एसिंक्रोनस कोड ब्राउज़र के वेब एपीआई वातावरण में चलता है। यह कोड को जावास्क्रिप्ट थ्रेड/कॉल स्टैक को ब्लॉक करने से रोकता है। एसिंक्रोनस कोड के लिए कॉलबैक फ़ंक्शन वेब एपीआई वातावरण में पंजीकृत हैं। जब कॉलबैक निष्पादित करने के लिए तैयार होता है तो इसे कॉलबैक कतार में रखा जाता है। वादों द्वारा लौटाए गए कॉलबैक को छोड़कर सभी कॉलबैक यहां कतारबद्ध हैं।

कॉल स्टैक खाली होने तक कॉलबैक निष्पादित नहीं किए जाएंगे। फिर उन्हें FIFO (फर्स्ट इन फर्स्ट आउट) क्रम में निष्पादित किया जाएगा।

यह जानना भी महत्वपूर्ण है कि वादे (फिर, पकड़) से कॉलबैक कॉलबैक कतार में नहीं आते हैं। वे एक सूक्ष्म कार्य कतार में जाते हैं। कॉलबैक कतार पर इस कतार की प्राथमिकता है। इसका मतलब है कि माइक्रो टास्क कतार से सभी कॉलबैक को कॉलबैक कतार के कार्यों से पहले बुलाया जाएगा।


मेरे मामले में, संदर्भ अपडेट navigation.pop(); के बाद होगा, लेकिन चूंकि संदर्भ वैश्विक है और घटक के अनमाउंट होने के बाद मैं UI को अपडेट नहीं कर रहा हूं, यह ठीक होना चाहिए।

अगर मैं किसी भी चीज में गलत हूं तो मैं सुधार का स्वागत करता हूं।

0
Jo Momma 18 मार्च 2021, 22:48