Transcript for:
रिएक्ट के कॉन्सेप्ट्स और उनकी महत्ता

हो एवरीवन इस वीडियो में हम रिएक्ट के कुछ ऐसे कॉन्सेप्ट्स को डिस्कस करेंगे जिसको इंटरव्यूज में तो बहुत ही ज्यादा पूछा जाता है और रिएक्ट जी तरह से बहुत ही ज्यादा ऑप्टिमाइज और बहुत ही ज्यादा परफॉर्मेंस है इन सारे कॉन्सेप्ट्स की वजह से इन साड़ी चीजों की वजह से जो की हम इस वीडियो में पढ़ेंगे इस वीडियो में समझेंगे उन्हें की वजह से रिएक्ट बहुत ही ज्यादा परफॉर्मेंट और बहुत ही ज्यादा ऑप्टिमाइंस और बहुत ही ज्यादा फास्ट है तो उसमें क्या-क्या है एक तो वर्चुअल ऑन हम समझेंगे की क्या होता है हालांकि अगर आपने स्टार्टिंग से वीडियो फॉलो किया है तो आपने अगर ये रिएक्ट का कोर्स सॉल्व किया तो आपको पता होगा वर्चुअल नाम क्या है मैंने कई बार दिखाए भी है प्रैक्टिकल करके और कई बार बताया भी है की वर्चुअल हम क्या लेकिन इसमें हम अलग से वर्चुअल दो समझेंगे और एक डिफिंग एल्गोरिथम होता है उसके बाद हमारे कॉम्पोनेंट्स को अपडेट करता है तो डिफ्यूजन हम समझेंगे की कैसे कम करता है रिएक्ट के अंदर हम इंप्लीमेंट नहीं करेंगे अपने खुद के विषम समझेंगे रेट के अंदर कैसे कम करता है वह भी इसी डिफिंग एल्गोरिथम और हमारे दो को अपडेट करने से रिलेटेड प्रोसेस तो ये साड़ी चीज हम समझेंगे इस वीडियो में रिएक्ट के अंदर क्या होती है और ये हमारा रिएक्ट का लास्ट वीडियो होने वाला है इसके बाद हमारा रिएक्ट जो है वो कंप्लीट हो जाएगा और बचेगा रिडक्शन तो फिर रिडक्स को हम अलग सीरीज में कर करेंगे तो चलो ए जाते हैं अपने स्क्रीन पे और एकदम प्रैक्टिकल समझते हैं की रिएक्ट कैसे चीजों को अपडेट करता है और वर्चुअल डम डिफाइनिंग है सब कुछ क्या होता है तो यहां पर मैंने एक अपना वही बहुत ही पुराना प्रोजेक्ट ओपन कर लिया है क्योंकि एपिसोड नंबर 12 का यहां पे अगर आप देखेंगे तो कॉन्सेप्ट ऑफ स्टेट और रिएक्ट स्टेट का कॉन्सेप्ट रिएक्ट के अंदर जो हमने शिखा था तभी का यह प्रोजेक्ट है आप चाहे तो उसे वीडियो के डिस्क्रिप्शन से एपिसोड नंबर 12 के जो वीडियो है उसके डिस्क्रिप्शन ठीक है तो यहां पर एक चीज में हटा देता हूं एक ही बटन है रिमाइंडर की इस बटन को हटा देते हैं यह एप्पल काउंटर वाले फाइल के अंदर तो इस पूरे पी टाइप को हटा देते और वह बटन चली गई तो अभी हमने जो लास्ट वीडियो में अपना खुद का रिएक्ट बनाया था उसमें क्या होता था की अगर हम मां लो यहां पर स्टेट को अपडेट करवा रहे हैं तो यहां पर यह घटना जाएगा ये घटना जाएगा अगर मैं इस अरा को प्रेस करता हूं तो यहां पर क्या हो रहा है मैंने इस पर्टिकुलर इस h1 को एक्सपेंड करके रखा तो यह केवल स्पैन के अंदर का टेक्स्ट ही चेंज हो रहा है हमारा पूरा का पूरा नाम रेंडर नहीं हो रहा है जबकि हमने जो प्रोजेक्ट बनाया है और इसको जब रन करते हैं ना तो हमारा पूरा का पूरा दम केवल हम अगर एक मिनट टेक्स्ट ही चेंज कर रहे हैं तो अभी पूरा का पूरा डॉ हमारा चेंज होता है मैं इस लोकलहोस्ट को ओपन कर लेट हूं यहां पर ओपन हो गया और अगर हम यहां पर इस h1 के अंदर जहां पर जीरो लिखा है इसको अगर हम क्लिक करें एक बार मैं इसको ओपन कर देता हूं जैसे मैं इस पर क्लिक करूंगा यह मेरा पूरा दो को लैप्स हो गया इसका मतलब ये पूरा का पूरा रेंडर हुआ पूरा का पूरा एप्लीकेशन नहीं हो रहा है यहां पर मैंने क्लिक किया तो देखो ये वन हुआ ठीक है यह वन हुआ लेकिन यह पूरा का पूरा कॉलेप्स हो गया 123 यह बढ़ता जा रहा है लेकिन पूरा का पूरा का पूरा का पूरा लेकिन यहां पर यहां पर केवल वही स्पेसिफिक पार्ट अंदर होता है जो की हम कर रहे हैं जैसे की यहां पर अपल्स जो है यह रेंडर नहीं हो रहा है यह वैसे का वैसा ही है ठीक है वही अपडेट हो रहा है और अपडेट होने का पता मैं कैसे चला है जो भी डम नोड या डम के अंदर जो भी चीज अपडेट होता है वो ब्लू कलर में ब्लैंक करता है यहां पे हल्का सा ब्लैंक करता हुआ दिखाई देगा आपको तो ये स्पैन जो है ये ब्लैंक कर रहा है इससे हमें ये पता चल रहा है की इस टाइम चेंज हो रहा है और केवल ही स्पैन नहीं एक और स्पैन है यह वाला चेंज हो रहा है तो यह दोनों मैंने आपके सामने रख दिया अगर मैं इसको चेंज करता हूं दोनों स्पैन के अंदर जो टेक्स्ट है वो चेंज हो रहा है बस बाकी पूरा का पूरा हमारा दो आगे आईटी इसे इंटरेक्ट है वहां पर लगा हुआ है तो यह सब कुछ रिएक्ट अपने डिफिंग एल्गोरिथम के करण कर का रहा है तो समझते हैं कैसे कम करता है तो रियाद अब डिफिंग का मतलब हम थोड़ा समझ लेते हैं डिफिन क्या है तो डिफिंग का मतलब होता है दो चीजों के बीच में डिफरेंस पता करना और अगर आप चाहे तो यहां पर जैसे आपने गिफ्ट उसे किया होगा यहां पर इस प्रोजेक्ट के अंदर तो गेट नहीं है तो वहां पर भी हम कंपेयर करते हैं पूरा हमारा जो वे एस कोड है वो दिखता है की पुराने फाइल के बीच में और नए फाइल के बीच में क्या चेंज है किस लाइन पे एक्जेक्टली चेंज हुआ है तो डिफिंग का मतलब होता है की डिफरेंस पता करना तो यह डिफरेंस कैसे पता करता है ठीक है जो रिएक्ट है वो पुराना हमारा दो कैसा था नया दो कैसा है इसके बीच में डिफरेंस कैसे पता करता है तो उसके लिए रिएक्ट उसे करता है क्यों उसे करता है तो एक बार हम वर्चुअल दो को कंसों में प्रिंट करके देखते हैं कैसे देखा है तो अभी जैसे की हमारा पूरा अप है ठीक है तो इसका पूरा नाम जो है वह एक सिंपल ऑब्जेक्ट के फॉर्मेट में रहेगा ठीक है अभी मैं एक h1 डॉ फॉर्मेट दिखता हूं जैसे की हा वन है इसको मैं एक बाहर यहां पर मैंने यहां पे कंसों डॉ कुछ किया था यह तो हमारा पुराना वाला प्रोजेक्ट है इसको मैं क्लोज कर देता हूं इसके अंदर हमें कम नहीं करना है हमें अपने इस वाले प्रोजेक्ट के अंदर कम करना है तो यहां पे एक बार में कंसोल में प्रिंट करके दिखता हूं एक डम एलिमेंट जो एक्चुअल डम एलिमेंट होता है वो कैसा दिखता है और वर्चुअल डोमिलामेंट कैसा दिखता है दोनों हम देखेंगे अभी मैं एक कम करता हूं app.js के अंदर ए जाता हूं यहां पर मैं h1 ठीक हूं क्रिएट कर देंगे ऐसे ही लिख देंगे तो हमारा एक वर्चुअल डम बन जाएगा ठीक है ये हमारा वर्चुअल टर्म बन गया वर्चुअल एलिमेंट है हम बोल सकते हैं की h1 जो है एक वर्चुअल डम एलिमेंट है पूरा का पूरा दम नहीं है एक एलिमेंट है इसका और इसको मैं कॉन्सनल में प्रिंट करवा रहा हूं तो हमारा जो वर्चुअल दो का एलिमेंट है वह कुछ ऐसा दिखता है जिसके अंदर एक दो तीन कर पांच छह साथ बेसिकली 7 8 प्रॉपर्टीज हैं जिन के बहुत ही ज्यादा प्रॉपर्टीज नहीं है और इसके प्रोटॉन को अगर ओपन करेंगे तो यह सिंपल ऑब्जेक्ट है और फिर उसके आगे कोई टाइप नहीं है मतलब बहुत ही ज्यादा प्रॉपर्टीज नहीं है बहुत ही छोटा इसका साइज है ठीक है अभी मैं एक रियल दो का एलिमेंट बनाता हूं तो रियल टॉम का एलिमेंट कैसे बनाएंगे और यहां पर मैच वन दाल देंगे ठीक है और इसके अंदर अगर हम चाहे तो टेक्स्ट रख सकते हैं और कैसे टेक्स्ट रखेंगे h1 अंदर स्कोर रियल डॉट टेक्स्ट इसे इक्वल तू इंटर टेक्स्ट मैंने यहां पर लिख दिया मैं हेलो शब्द पहले लिख देता हूं हेलो वर्ल्ड ठीक है ऐसा ऑब्जेक्ट वाला स्ट्रक्चर देखते जो मतलब गिनी नहीं सकते कितनी ज्यादा प्रॉपर्टीज है यहां पर और लगभग मुझे लगता है या 200 से ज्यादा प्रॉपर्टीज होगी और इतना ही नहीं है अभी इसके प्रोटो टाइप को अगर हम ओपन करेंगे तो यहां पर देखो कितनी प्रॉपर्टी है प्रॉपर्टीज हैं यानी की उसके ऊपर ये साड़ी प्रॉपर्टीज हम एक्सेस कर सकते हैं अभी ये खत्म नहीं हुआ यहां तक ए गए फिर ये देखो एचटीएमएल एलिमेंट यहां पे और भी प्रोटोटाइप में मिलता जा रहा है और भी इसको ओपन करेंगे तो ये देखो कितनी अच्छी मिलती जा रही है h1 है इसको मैं ओपन करता जा रहा हूं और यहां पर जाकर यह खत्म हुआ जो की हम स्क्रॉल करते जा रहे हैं करते जा रहे हैं करते जा रहे हैं खत्म ही नहीं हो रहा है और यह हमारा एक वर्चुअल दो का है जिसके अंदर बस इतनी प्रॉपर्टीज हैं तो रिएक्ट जो है वो इसीलिए वर्चुअल उसे करता है क्योंकि उसको कंपेयर करना है पुराना कौन सा था मतलब पुराने के अंदर क्या-क्या चीज थीं क्या-क्या प्रॉपर्टीज थी क्या-क्या अटरीब्यूट से क्या टेक्स्ट मतलब टेक्स्ट कंटेंट था तो पुराना और नया दो ठीक है तो वो पुराने वर्चुअल डॉन का एक कॉपी रखना है अपने मेमोरी में और एक नया कॉपी बनाता है जो की चेंज है मतलब एक नया वर्चुअल बनाता है जिसमें कुछ चेंज हुआ है और पुराने दो पुराने वर्चस्वम और नए वर्षों में कंपैरिजन करता है क्या चेंज हुआ है है तो उसको कंपैरिजन करने में ज्यादा मेहनत नहीं करनी पड़ती इसीलिए ओवर छोटा उसे करता है मेहनत क्यों नहीं करनी पड़ती क्योंकि ज्यादा प्रॉपर्टीज कंपेयर करने के लिए नहीं है अगर एक्चुअल डॉ से कंपेयर करने जाएगा एक्चुअल दो को कंपेयर करने जाएगा तो कंपेयर करता र जाएगा वो एक ही दो को जितने में तो वो पूरे का पूरा एप्लीकेशन को कंपेयर कर लगा उतने में तो वो केवल एक ही एलिमेंट वह कंपेयर कर पाएगा अगर एक्चुअल उसमें उसको कंपेयर करता करने जाएगा तो इसीलिए रिएक्ट क्या करता है एक वर्चुअल डम बनाता है और वर्चुअल दो मतलब वर्चुअल एलिमेंट से ही मिलकर बनते हैं अभी मैं यहां पर इन सबको हटा देता हूं ठीक है और जैसे की यह जो हमारा अप कंपोनेंट है इसके अंदर एप्पल काउंटर है एप्पल काउंटर यहां पर हमने उसे किया है और एप्पल काउंटर के अंदर हमने और भी कॉम्पोनेंट्स उसे किया हैं जैसे की एप्पल बास्केट है यहां पर अगर एप्पल बास्केट के अंदर ए जैन और एप्पल बास्केट के अंदर हमने कोई भी कंपोनेंट नहीं उसे किया हमने सिंपल केवल मतलब देव और h1 और पैराग्राफ कर रहे हैं दो प्रॉपर्टीज को पास कर रहे हैं तो बेसिकली यहां पे हम एक ऑब्जेक्ट पास कर सकते हैं एप्पल काउंट मां लो 10 में दाल देता हूं यहां पे और बास्केट नाम इसे इक्वल तू राइट बास्केट या कुछ भी बस ऐसे ही मैंने राइट लिख दिया बेसिकली एक ट्री लाइक स्ट्रक्चर हम बोल सकते हैं एक ट्री की तरह है चिल्ड्रन मतलब पैरंट चिल्ड्रन उसका चिल्ड्रन उसका चिल्ड्रन ऐसे ही एक ट्री लाइक स्ट्रक्चर है जो की एक वर्चुअल ड्रोन इसको हम बोल सकते हैं यही है तो रिएक्ट जो है इसको कंपेयर करता है और जो हमारा रियल नाम है वो ये है ठीक है एप्पल बास्केट जो है हमारा ये यहां पे है रियल वाला ठीक है अब इसकी प्रॉपर्टीज अगर हम देखें तो यहां पे बहुत साड़ी प्रॉपर्टीज हैं अगर हम इसको देख लेने तो बहुत साड़ी प्रॉपर्टीज है और यहां पर जो टाइप है इधर नहीं दिखा रहा है लेकिन बहुत ही ज्यादा प्रॉपर्टीज है और इसके भी चिल्ड्रन होंगे यहां पे अगर हम चिल्ड्रन देखें तो इसके भी यहां पर चिल्ड्रन को अगर हम ओपन करके जैन देखें तो उसके पीछे और फिर इसको ओपन करेंगे बहुत ही ज्यादा प्रॉपर्टीज होती हैं तो को कंपेयर करने में बड़ी दिक्कत होगी इसीलिए रियाद एक वर्चुअल दो का कॉपी रखना है जिसको कॉपी मतलब कंपेयर करने में डिफिंग एल्गोरिथम के द्वारा जब वो कंपेयर करता है तो ज्यादा मेहनत नहीं करनी पड़ती बहुत ही कम मेहनत में पूरा कंपेयर कर लेट है और पता कर लेट है कौन सा दो चेंज हुआ है कौन सा मतलब नोट एक्जेक्टली कौन सा पार्ट चेंज हुआ है और फिर उसको जाके एक्चुअल डॉ में अपडेट कर देता है मैं सब कुछ कैसे करता है उसके लिए एल्गोरिथम लिखा है उसके लिए ज्यादा स्क्रिप्ट जावास्क्रिप्ट नहीं मतलब जावा स्क्रिप्ट के अंदर ही पूरा एल्गोरिथम लिखा है फेसबुक वालों ने रिएक्ट वालों ने की वो कंपेयर करेगा यहां पर एक मीडियम का ब्लॉक था यहां पर निखिल करके कोई है काफी अच्छी इमेज मिली थी जिसका उसे करके हम समझ सकते हैं की यह हमारा जो है एक वीर टॉम अगर हम मां लेने तो यह हमारा वर्चुअल है हमारे वर्चुअल डम में हमने स्टेट अपडेट किया मां लो स्टेट इंसर्ट करके कुछ भी चेंज किया और यह डाउनलोड हमारा चेंज हो गया ठीक है अब अगर ये डोमिनो चेंज हो गया तो उसका चाइल्ड ये नीचे वाला है ठीक है तो उसको भी रिएक्ट जो है जो रिएक्ट का एल्गर में ये मां लिया की अगर पेरेंट्स चेंज हुआ है तो चाइल्ड भी चेंज हो गया होगा तो चाइल्ड को भी वो अपडेट कर देगा ठीक है तो ये अभी तक जो हमारा ब्राउज़र का जो एक्चुअल डॉ है वहां पर कुछ भी नहीं होगा यहां पर कंप्यूटर कर रहा है डिस्को यानी की डिफरेंस पता कर रहा है क्या-क्या चेंज हुआ तो हमने एक्चुअल में एक ही चीज चेंज किया लेकिन उसने डिसाइड कर लिया की वह और उसका चाइल्ड जो है दोनों चीज चेंज हो गए हैं और यह एक्चुअल में फाइनल फाइनल क्या है और जब भी हमारा फाइनल वर्ष निकाल के आता है मतलब जब भी कंप्यूटर हो जाता है डिफरेंस पता चल जाता डिफरेंस है तब उसके बाद ब्राउज़र अपडेट किया जाता है केवल इस पर्टिकुलर चीज को बाकी साड़ी चीज आगे आईटी इसे रहती हैं तो हमारा एक्चुअल डॉ होता है उसको हम बार-बार अपडेट नहीं करते हैं ठीक है वर्चुअल दो को हम अपडेट करके एक छोटे पॉइंट को अपडेट करके कंपेयर कर सकते हैं मतलब हम नहीं करते तो कुछ इस तरह से जो रिएक्ट है हमारे दो को अपडेट करता है वह डायरेक्टली नहीं अपडेट करता हूं पहले वर्चुअल डम में कंपैरिजन करता है पता करता है क्या चीज अपडेट हुआ और जब उसको पता चल जाता है फाइनल चीज की बस इसी चीज में अपडेट हुआ तो इस चीज को वह अपडेट करके हमारे ब्राउज़र हमारे एक्चुअल में शो कर देता है और इसी पूरे प्रोसेस को हम बोलते हैं कंपेयर करना और कंपेयर करने के बाद जो फाइनल जो चेंज हमें मिलते हैं जो भी डेफ मिलता है यानी की जो लास्ट में चेंज हुआ है उसको अपडेट करना है यह पूरा प्रोसेस जो है यह रिकॉन्सिलिएशन कहलाता है तो रिएक्ट के इंटरव्यूज में पूछ सकते हैं रिकॉन्सिलिएशन क्या है तो आप बोल सकते हैं की डी प्रोसेस ऑफ कंप्यूटिंग चेंज मतलब कंप्यूटर इस कॉल्ड रिकॉन्सिलिएशन तो ऐसा कुछ आप बोल सकते हैं ये जो पूरा होल प्रोसेस है स्टेट मतलब हमारे को अपडेट करने का डेटिंग एल्गोरिथम लगा के इस को हम रिकॉन्सिलिएशन कहते हैं तो कुछ इस तरह से बिहाइंड डी साइंस रिएक्ट कम कर रहा है जिसके करण यह हमारा केवल वही एक्सेट डॉ का नोट चेंज हो रहा है जो की हम जो की चेंज होना चाहिए हालांकि यहां पर देखा जाए तो पूरा का पूरा कंपोनेंट रेंडर हो रहा है अगर हम यहां पर रिएक्ट के अंदर आकर देखें तो हमारा जो एप्पल बास्केट है अगर यही पर आकर देख लेने यहां पे बस केवल काउंसिल लॉक प्रिंट कर देता हूं है तो यह देखो मैं यहां पे अगर कुछ भी चेंज करूंगा तो इसके यह पूरा का पूरा कोड रन हो रहा है ये रिटर्न होकर जा रहा है ठीक है लेकिन ये पूरा का पूरा हमारे दो में बार-बार अपडेट नहीं होता है ठीक है यह एल्गोरिथम जो रिकॉन्सिलिएशन का एल्गोरिथम है रिकंकुलेशन का नहीं डिफेंस कल कर रहा था मैं रिकॉन्सिलिएशन का प्रोसेस है वह मैं सर करता है की केवल और केवल वही चीज चेंज हो जितना रिक्वायर्ड फालतू में कुछ भी चेंज ना हो की डम में कोई भी ऑपरेशन करना काफी एक्सपेंसिव होता है ठीक है जितना हो सके उतना कम मॉडिफाइड करना चाहिए फालतू में दो को मॉडिफाई करने की कोई जरूर नहीं है तो मैं उम्मीद करता हूं आपको यह समझ ए गया होगा की वर्चुअल क्या है होता है बेसिकली अगर वर्चुअल डम नहीं उसे करेगा तुम्हारे रियल दो के अंदर बहुत ही ज्यादा प्रॉपर्टीज होती है उसको कंपेयर करने में बड़ी दिक्कत होगी ठीक है और डिफिंग एल्गोरिथम क्या होता है और डिफिंग एल्गोरिथम के बड़े में अगर आप चाहे तो और भी और भी इन डिटेल पढ़ सकते हैं की वो कैसे कम कर रहा है क्या चीज रिज्यूम करके चला है आप चाहें तो उसको और भी इन डिटेल पढ़ सकते हैं की कैसे कम करता है और आपको रिकॉन्सिलिएशन प्रोसेस समझ में ए गया होगा तो ओरिजिनल रिकॉन्सिलिएशन प्रोसेस बेसिकली हमारे दो को एफिशिएंट अपडेट करने का जो पूरा प्रोसेस है इस को हम रिकॉन्सिलिएशन प्रोसेस करते हैं उसके अंदर डिफाइनिंग एल्गोरिथम ये सब कुछ वर्चुअल दो का कंपैरिजन यह सब कुछ बयान डी साइंस ए जाता है और हमारे दो को अपडेट करना भी इंक्लूड रिकॉन्सिलिएशन में तो यह सारे टर्म्स है जो की मैंने सोचा आपको बता देनी चाहिए ताकि अगर इंटरव्यूज में आपको पूछा जाए कभी तो आपको एकदम से नया ना लगे आपको पता है यह सारे टर्म्स होते हैं आप चाहे तो इसमें और भी इन डिटेल जाकर पढ़ाई कर सकते हैं देख सकते हैं कोई भी एप्लीकेशन बनाने के लिए कितनी भी कंप्लीट एप्लीकेशन हो आप बना सकते हैं तो मैं उम्मीद करता हूं आपको ये वीडियो अच्छी लगी होगी अगर आपका कोई भी डाउट है किसी भी टॉपिक से रिलेटेड तो आप कमेंट में पूछ सकते हैं आप चाहे तो आप टेलीग्राम ग्रुप जॉइन करके सकते हैं मिलते हैं तब तक के लिए बाय बाय [संगीत]