प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

प्रस्तावना

अग्रे-अन्त-विकासे Vue तथा React इति द्वौ अतीव लोकप्रियौ जावास्क्रिप्ट्-रूपरेखा स्तः, येषु प्रत्येकस्मिन् अद्वितीयं जीवनचक्र-तन्त्रम् अस्ति । एतेषां जीवनचक्राणां अवगमनं निपुणता च कुशलानाम्, परिपालनीयानां च अग्रभागीय-अनुप्रयोगानाम् विकासाय महत्त्वपूर्णम् अस्ति । अयं लेखः Vue तथा React इत्येतयोः जीवनचक्रयोः विस्तरेण तुलनां करिष्यति येन विकासकाः एतयोः ढाञ्चयोः अधिकतया अवगन्तुं शक्नुवन्ति ।

वुए जीवन चक्र

Vue इत्यस्य जीवनचक्रं Vue इत्यस्य दृष्टान्तस्य निर्माणात् विनाशपर्यन्तं सम्पूर्णं प्रक्रियां निर्दिशति । Vue इत्यस्य जीवनचक्रं ८ मुख्यपदेषु विभक्तुं शक्यते : १.

1. सृष्टिचरणम्

• beforeCreate इति: अस्मिन् स्तरे Vue दृष्टान्तः आरब्धः अस्ति, परन्तु दत्तांशनिरीक्षणं घटनातन्त्रं च अद्यापि न निर्मितम्, तथा च DOM नोड् प्राप्तुं न शक्यते (कोऽपि दत्तांशः el च नास्ति)
• निर्मितः : अस्मिन् क्षणे Vue दृष्टान्तः निर्मितः अस्ति तथा च भवान् दत्तांशं विधिं च अभिगन्तुं शक्नोति, परन्तु भवान् DOM नोड् (दत्तांशसहितं, el विना) प्राप्तुं न शक्नोति । अयं चरणः अतुल्यकालिकसञ्चालनस्य, दत्तांशप्रारम्भीकरणस्य च कृते उपयुक्तः अस्ति ।

2. भारचरणम्

• beforeMount इति: अस्मिन् संक्रमणपदे Vue द्वारा माउण्ट् कृतं मूलनोड् निर्मितम् अस्ति, परन्तु अद्यापि पृष्ठे न रेण्डर् कृतम् (दत्तांशः el च अस्ति, परन्तु विशिष्टः DOM प्राप्तुं न शक्यते)
• आरुह्य: दत्तांशः DOM च रेण्डर् कृतः अस्ति अस्मिन् समये, भवान् DOM-निर्भरं कार्यं कर्तुं शक्नोति, यथा प्लग-इन्-प्रारम्भः अथवा DOM-सञ्चालनम् ।

3. अद्यतनचरणम्

• beforeUpdate इति : यदा data update ज्ञायते तदा निष्पादितम्, परन्तु DOM update इत्यस्मात् पूर्वं । अस्मिन् समये पृष्ठे विद्यमानाः दत्तांशाः अद्यापि पुरातनाः सन्ति, परन्तु दत्तांशेषु विद्यमानाः दत्तांशाः अद्यतनाः अभवन् ।
• अद्यतनम्: अद्यतनस्य समाप्तेः अनन्तरं निष्पादितं, पृष्ठे विद्यमानं दत्तांशं दत्तांशं च अद्यतनं कृतम् अस्ति ।

4. विनाशचरणम्

• beforeDestroy इति: यदा Vue दृष्टान्तः नष्टः भवितुम् अर्हति तदा निष्पादितः अस्मिन् समये सर्वे दत्तांशाः पद्धतयः च अद्यापि उपलब्धाः सन्ति, परन्तु नष्टाः भवितुम् अर्हन्ति ।
• नष्टः: Vue दृष्टान्तः नष्टः अस्ति, सर्वे दत्तांशाः पद्धतयः च अनुपयोग्याः सन्ति ।

जीवनचक्रं प्रतिक्रियां कुर्वन्तु

React इत्यस्य जीवनचक्रं व्यापकरूपेण त्रयः चरणाः विभक्तुं शक्यते : माउण्टिङ्ग्, रेण्डरिंग्, अनइन्स्टॉलिंग् च । विशेषतः निम्नलिखितवर्गेषु विभक्तुं शक्यते ।

1. माउण्टिङ्ग् तथा अनमाउण्टिङ्ग् प्रक्रिया

• कन्स्ट्रक्टर्: React घटकानां स्थितिं (राज्यं) तथा गुणं (props) आरभतुं प्रयुक्तं, props तथा context इत्येतत् पैरामीटर् रूपेण प्राप्नोति ।
• componentWillMount इति(अप्रचलितः): घटकस्य कन्स्ट्रक्टर् इनिशियलाइजेशन डाटा इत्यस्य माध्यमेन गतः परन्तु अद्यापि DOM रेण्डर् न कृतः ततः परं निष्पादितम् ।
• घटकDidMount: घटकस्य प्रथमं रेण्डरिंग् सम्पन्नम् अस्ति, अस्मिन् समये, DOM नोड् उत्पन्नम् अस्ति, यत् AJAX अनुरोधं वा DOM ऑपरेशनं कर्तुं उपयुक्तम् अस्ति ।
• componentWillUnmount इति: घटकस्य विस्थापनस्य प्रवृत्तेः समये निष्पादितं भवति, संसाधनसफाईक्रियाणां कृते उपयुक्तं, यथा समयनिर्धारणं वा घटनाश्रोतृणां निष्कासनं वा ।

2. अद्यतनप्रक्रिया

• shouldComponentUpdate इति : कार्यप्रदर्शनस्य अनुकूलनार्थं तथा घटकानां पुनः प्रस्तुतीकरणं भवति वा इति नियन्त्रणार्थं च उपयुज्यते । रेण्डरिंग् निवारयितुं false इति प्रत्यागच्छतु ।
• componentWillReceiveProps इति(अप्रचलितं, getDerivedStateFromProps इत्यनेन प्रतिस्थापितम्): यदा घटकः नूतनानि प्रोप्स् प्राप्नोति तदा निष्पादितं, नूतनप्रोप्स आधारितं स्थितिं अद्यतनीकर्तुं उपयुक्तम् ।
• componentWillUpdate इति: घटकस्य पुनः प्रस्तुतीकरणात् पूर्वं निष्पादितम्, परन्तु अत्र DOM-क्रियाः अथवा दत्तांश-अद्यतनं कर्तुं न अनुशंसितम् ।
• घटकDidUpdate: घटकस्य अद्यतनीकरणानन्तरं निष्पादितं, अद्यतनात् पूर्वं प्रोप्स् तथा राज्यं प्राप्तुं शक्नुवन्ति ।

3. React 16.3 नूतनं जीवनचक्रं योजयति

• getDerivedStateFromProps प्राप्ति: componentWillReceiveProps इत्यस्य स्थाने नूतनप्रोप्स् तथा राज्यस्य आधारेण घटकस्य स्थितिं अद्यतनीकर्तुं प्रयुक्तम् ।

तुलनासारांशः

सादृश्यम्

• उभयत्र घटकस्य विभिन्नेषु जीवनचक्रपदेषु कोडं निष्पादयितुं अवसरः प्राप्यते ।
• घटकनिर्माणस्य, अद्यतनीकरणस्य, विनाशस्य इत्यादीनां चरणानां समये विशिष्टं तर्कं निष्पादयितुं शक्यते ।

भेदः

• डिजाइन अवधारणा: Vue प्रतिक्रियाशीलं भवति तथा च परिवर्तनीयदत्तांशस्य अवधारणायाः आधारेण React कार्यात्मकं भवति तथा च एकदिशा आँकडाप्रवाहस्य अपरिवर्तनीयदत्तांशस्य च वकालतम् करोति।
• कार्यप्रदर्शन अनुकूलन: Vue इत्यस्य कार्यक्षमतायाः अनुकूलनं तुल्यकालिकरूपेण स्वचालितं भवति, परन्तु यदा बहुधा अवस्थाः सन्ति तदा कार्यक्षमतायाः समस्याः भवितुम् अर्हन्ति, परन्तु नियन्त्रणं अधिकं परिष्कृतं भवति;
• आरम्भं कर्तुं कष्टम्: Vue इत्यस्य आरम्भः तुल्यकालिकरूपेण सुलभः अस्ति, विशेषतः HTML तथा JavaScript foundation इत्यनेन सह विकासकानां कृते React इत्यस्य JSX वाक्यविन्यासस्य React ज्ञानस्य च अधिकं शिक्षणं अवगमनं च आवश्यकम् अस्ति

अनुप्रयोग परिदृश्य

• लघु-मध्यम-आकारस्य परियोजनानां कृते Vue इत्यस्य उपयोगस्य सुगमता, द्रुतविकासक्षमता च अधिकं उपयुक्ता भवितुम् अर्हति ।
• बृहत्तरपरियोजनानां कृते React इत्यस्य लचीलता, मापनीयता च अधिकं लाभप्रदं भवितुम् अर्हति ।