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

[अनुवादः] Reactjs प्रदर्शनम्

2024-07-08

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

मम आङ्ग्लभाषा सीमितम्, मम कौशलं मध्यमं, अहं च अतीव ज्ञानी अस्मि यतः अहं अनुवादकः नास्मि, अतः भवन्तः मां विश्वासं कर्तुं न शक्नुवन्ति तर्हि कृपया मूलपाठं पठन्तु~~

मूल पता : १.https://facebook.github.io/react/docs/उन्नत-प्रदर्शनम्.html


###प्रदर्शन अनुकूलन

यदा कदापि विकासकाः वास्तविकप्रकल्पे react इत्यस्य उपयोगं कर्तुं चयनं कुर्वन्ति तदा ते प्रथमं प्रश्नं पृच्छन्ति यत् react इत्यस्य उपयोगेन परियोजना द्रुततरं, अधिकं लचीलं, परिपालनं च सुलभं भविष्यति वा। तदतिरिक्तं, प्रत्येकं राज्यदत्तांशपरिवर्तने अन्तरफलकस्य पुनः प्रतिपादनस्य प्रक्रिया कार्यप्रदर्शनस्य अटङ्कं जनयिष्यति वा? आन्तरिकरूपेण, React महत् DOM-सञ्चालनं न्यूनीकर्तुं केषाञ्चन सूक्ष्म-तकनीकानां उपयोगेन कार्यक्षमतां सुनिश्चितं करोति यत् प्रत्येकं समये UI-अद्यतनं जनयति ।

####DOM इत्यत्र प्रत्यक्षप्रभावं परिहरन्तु
React वर्चुअल् DOM इत्यस्य एकं स्तरं कार्यान्वयति, यस्य उपयोगः ब्राउजर् इत्यस्य मूल DOM वृक्षस्य नक्शाङ्कनार्थं भवति । वर्चुअल् DOM इत्यस्य एतस्य स्तरस्य माध्यमेन React प्रत्यक्षतया DOM इत्यस्य संचालनं परिहरितुं शक्नोति, यतः प्रत्यक्षतया ब्राउजर् DOM इत्यस्य संचालनस्य गतिः JavaScript ऑब्जेक्ट्स् इत्यस्य संचालनात् बहु न्यूना भवति । यदा कदापि घटकस्य गुणाः अथवा स्थितिः परिवर्तते, react स्मृतौ नूतनं वर्चुअल् dom निर्मास्यति तथा च मूलपुराणेन सह तुलनां करिष्यति यत् ब्राउजर् इत्यस्य dom वृक्षस्य अद्यतनीकरणस्य आवश्यकता अस्ति वा इति निर्धारयिष्यति, अतः dom इत्यस्य रेण्डरिंग् यथावत् अनुकूलितं करिष्यति संभवति कार्यप्रदर्शनहानिः।

अस्य उपरि react घटकजीवनचक्रकार्यं प्रदाति,shouldComponentUpdate, घटकः पुनः रेण्डर् कर्तुं निर्णयं कर्तुं पूर्वं एतत् फंक्शन् आह्वयति (वर्चुअल् DOM तुलनायाः समाप्तेः अनन्तरं अन्तिम DOM उत्पन्नस्य च अनन्तरं एतत् फंक्शन् विकासकं पुनः रेण्डर् कर्तुं अधिकारं ददाति, तथा च फंक्शन् पूर्वनिर्धारितरूपेण प्रत्यक्षतया प्रत्यागच्छतिtrue, पूर्वनिर्धारितरूपेण DOM अद्यतनं प्रत्यक्षतया आरभ्यते इति सूचयति:

shouldComponentUpdate: function(nextProps, nextState) {
	return true;
}

ज्ञातव्यं यत् react इत्येतत् कार्यं बहुवारं आह्वयति, अतः यदि भवान् स्वयमेव अस्य कार्यस्य तर्कं कार्यान्वितुं योजनां करोति तर्हि कृपया यथासम्भवं कार्यक्षमतां सुनिश्चितं कुर्वन्तु

यथा, भवतः समीपे बहुविध-पोस्ट्-सहितं गपशप-अनुप्रयोगः अस्ति यदि तेषु केवलम् एकस्मिन् समये परिवर्तते, यदि भवान् निम्नलिखितम् कार्यान्वितवान्shouldComponentUpdate, react तान् पदानाम् पुनः प्रतिपादनं परिहरति ये परिस्थित्यानुसारं परिवर्तनं न कृतवन्तः:

shouldComponentUpdate: function(nextProps, nextState) {
	// TODO: return whether or not current chat thread is different to former one.
	// 根据实际情况判断当前帖子的状态是否和之前不同
}

संक्षेपेण, React यथासम्भवं महत् DOM-सञ्चालनं परिहरति तथा च विकासकाः अस्मिन् व्यवहारे बाधां कर्तुं शक्नुवन्ति ।

####shouldComponentUpdate कार्ये
अत्र बालतत्त्वानि युक्तस्य घटकस्य उदाहरणं दृश्यते, यथा अधः दर्शितम् अस्ति ।