React: Devtools V4: हाइलाइट अपडेट कहां है?

यहां वही मुद्दा। हाइलाइट अपडेट चला गया है।
मैं सोच रहा था कि अपडेट को ट्रैक करने के लिए अब प्रोफाइलर का उपयोग करना है या नहीं?

https://www.reddit.com/r/reactjs/comments/cqx554/introducing_the_new_react_devtools/ex1r9nb/

ईमानदार उत्तर यह है कि हमारे पास इसे लागू करने के लिए पर्याप्त समय नहीं था, और इसे अन्य सभी सुविधाओं को जारी करने से रोकने के लिए पर्याप्त महत्वपूर्ण नहीं माना।

हालांकि, इसके गहरे कारण हैं कि हमें यकीन नहीं है कि हम इसे वापस जोड़ देंगे। यह गलत विचार में योगदान देता है कि पुन: प्रस्तुत करना स्वयं खराब है (यदि वे सस्ते नहीं हैं तो वे नहीं हैं)। इसलिए लोग बेकार चीजों को अनुकूलित करने और वास्तविक प्रदर्शन के मुद्दों को याद करने में समय व्यतीत करते हैं।

नए DevTools में एक Profiler शामिल है जो आपके कोड में वास्तविक प्रदर्शन समस्याओं को खोजने में आपकी मदद करेगा। मैं अतिरिक्त रेंडर खोजने के लिए एक सुपर लाइटवेट तरीके की इच्छा को समझता हूं - और शायद हम इसे जोड़ देंगे - लेकिन हमें इस बारे में अधिक सोचने की आवश्यकता होगी कि इसे पहले कैसे काम करना चाहिए।

इनलाइन टिप्पणी जोड़ने के लिए संपादित

कुछ संबंधित पिछली चर्चा https://github.com/bvaughn/react-devtools-experimental/issues/244

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

मैं गलत विचार देने के बारे में @gaearon की चिंताओं को समझता

1. रेंडर अवधि के आधार पर आउटलाइन रंग चुनें

सस्ते रेंडर हरे रंग के होने चाहिए, महंगे रेंडर पीले या लाल रंग के होने चाहिए। या प्रोफाइलर द्वारा उपयोग किए गए ठीक उसी रंग का उपयोग करें।

2. भिन्न रूपरेखा फीका गति

आउटलाइन फ़ेड एनिमेशन, रेंडर अवधि के सापेक्ष होना चाहिए. तेज़ रेंडर तुरंत फीके होने चाहिए, धीमे रेंडर अधिक धीरे-धीरे फीके होने चाहिए।

3. चित्रित क्षेत्रों को अलग करें

मैं कभी कभी इस्तेमाल किया Highlight Updates Chrome की साथ Paint Flashing । इसने ऐसे रेंडर बनाए, जिनके कारण फिर से रंगना उन रेंडरर्स की तुलना में अलग तरह से हाइलाइट किया गया, जिनका कोई DOM प्रभाव नहीं था। मुझे लगता है कि DevTools में एक समान फ़ंक्शन बिल्ट-इन होना चाहिए।

• प्रदर्शन अनुकूलन के लिए बिना किसी रंग के एक महंगा रेंडर प्राथमिक लक्ष्य होना चाहिए।
• रेंडर जो कि फिर से रंगना स्पष्ट रूप से कुछ काम कर रहे हैं जिन्हें करने की आवश्यकता है।
• तेजी से प्रस्तुत करना जिसके परिणामस्वरूप कोई पुन: रंग नहीं होता है, अनदेखा करना ठीक है।

हो सकता है कि यहां तक ​​​​कि एक सेटिंग भी हो जो उपरोक्त में से केवल पहली बार चमकती हो (कुछ कॉन्फ़िगर करने योग्य थ्रेसहोल्ड के साथ)।

"सस्ते" या "तेज़" रेंडर की पहचान करना उतना सीधा नहीं है जितना लगता है, जैसे कारकों के कारण:

• प्रोडक्शन बिल्ड की तुलना में डेवलपमेंट बिल्ड बहुत धीमे हैं।
• डेवलपर लैपटॉप आम तौर पर अंतिम उपयोगकर्ता लैपटॉप की तुलना में बहुत तेज होते हैं।

प्रोफाइलर के बारे में अच्छी बात यह है कि यह सापेक्ष के रूप में गति की रिपोर्ट करता है, जिससे आप किसी भी सत्र में किसी एप्लिकेशन के सबसे धीमे हिस्से पर ध्यान केंद्रित कर सकते हैं। (आपको यह तय करना है कि सबसे धीमा हिस्सा कब काफी तेज है।) यह केवल पूर्वव्यापी में ही किया जा सकता है।

यह आपको कमिट का एक स्थिर स्नैपशॉट भी देता है, और कौन सा प्रॉप्स/स्टेट बदल गया है, जिससे आप न केवल यह देख सकते हैं कि एक विशेष घटक कितनी बार प्रस्तुत किया गया था (क्या यह आपकी अपेक्षा से अधिक था?) बल्कि विशेष रूप से _why_ इसे फिर से प्रस्तुत किया गया, और और क्या इसके साथ पुन: प्रस्तुत किया।

मुझे लगता है कि एक अच्छा मौका है कि हम प्रोफाइलर के हिस्से के रूप में देवटूल में किसी प्रकार की अद्यतन फ्लैशिंग तंत्र को वापस जोड़ने पर विचार कर सकते हैं। हो सकता है कि प्रोफाइलिंग सक्रिय होने पर ही यह चमकता हो (जैसे यह करता था)? हो सकता है कि यह हर उस घटक को फ्लैश करता है जो प्रोफाइलिंग बंद होने के बाद प्रोफाइलर में एक नई प्रतिबद्धता का चयन करते समय फिर से प्रस्तुत किया जाता है? (मुझे यह विचार पसंद है, क्योंकि यदि आप कुछ चूक गए हैं तो यह आपको "फिर से चलाने" देता है।) हमें इसके साथ थोड़ा प्रयोग करने और यह देखने की ज़रूरत है कि सबसे अच्छा क्या काम करता है।

मैंने यह सुनिश्चित करने के लिए इस सुविधा का बहुत उपयोग किया है कि केवल उन घटकों को प्रस्तुत किया जा रहा है जिन्हें प्रस्तुत किया जाना चाहिए। मेरे पास एक ऐप है जो एक ही घटक को कई बार अलग-अलग आईडी के साथ प्रस्तुत करता है, और मुझे यह सुनिश्चित करना अच्छा लगता है कि केवल एक जिसे पुन: प्रस्तुत करने की आवश्यकता है, उन सभी की बजाय प्रतिपादन कर रहा है। मुझे नए प्रोफाइलर के साथ इसे जांचने का कोई तरीका नहीं दिख रहा है।

मुझे नए प्रोफाइलर के साथ इसे जांचने का कोई तरीका नहीं दिख रहा है

आपने क्या प्रयास किया है? प्रोफाइलर को स्पष्ट रूप से दिखाना चाहिए कि एक बच्चा पुन: प्रस्तुत कर रहा है या कई।

मैं अक्सर 'हाइलाइट अपडेट' का उपयोग कर रहा था। यह देव-उपकरण की विशेषता थी जिसका मैंने सबसे अधिक उपयोग किया। बस यह देखने के लिए कि क्या अपडेट किया गया था, कितनी बार नहीं। निश्चित रूप से, आप ऐसा करने के लिए प्रोफाइलर का उपयोग कर सकते हैं लेकिन यह त्वरित दृश्य संकेत होने की तुलना में काफी अधिक बोझिल है।

मेरे लिए, "हाइलाइट अपडेट" "किलर फीचर" था ...

हम आपको सुनते हैं :-) मुझे नहीं लगता कि "मैंने इसका इस्तेमाल किया" कहने वाली और टिप्पणियां इस धागे में महत्वपूर्ण रूप से मदद करने जा रही हैं, इसके लायक क्या है। हम जानते हैं कि इस सुविधा का उपयोग करने वाले लोग हैं, और सोच रहे हैं कि इसे वापस लाने का सही तरीका क्या होगा। प्रतिक्रिया के लिए धन्यवाद!

यह विकल्प मेरी दैनिक कार्य प्रक्रिया के लिए एक आवश्यक घटक था जो तुरंत पुन: प्रस्तुत करने की समस्या को इंगित करता था। तो मुझे वास्तव में खुशी होगी, अगर आप इस शानदार फीचर को जल्द ही वापस ला सकते हैं।

+1 इस सुविधा के कुछ संस्करण को वापस लाने पर जो पुन: प्रस्तुत करने के त्वरित उच्च-स्तरीय दृश्य को सक्षम करता है (यहां तक ​​​​कि फिर से प्रस्तुत करने के लिए जो पूरी तरह से ठीक हैं जैसे कि जब हम संदर्भ अपडेट करते हैं)।

+1 वापस लाने पर

तो मुझे वास्तव में खुशी होगी, अगर आप इस शानदार फीचर को जल्द ही वापस ला सकते हैं।

जैसा कि ऊपर अनुरोध किया गया है:

मुझे नहीं लगता कि "मैंने इसका इस्तेमाल किया" कहने वाली और टिप्पणियां महत्वपूर्ण रूप से मदद करने जा रही हैं

इसे और अधिक स्पष्ट रूप से फिर से लिखने के लिए:

हम तुम्हें सुनते हैं!

कई लोगों ने इस भंडार की सदस्यता ली है। हम उन्हें हर कुछ घंटों में समान टिप्पणियों के साथ स्पैम नहीं करना चाहते हैं। इसके अतिरिक्त, हम व्यक्तिगत रूप से GitHub सूचनाओं का उपयोग करते हैं। यदि यह थ्रेड हर दिन "+1" के साथ टकराता है, तो हमें अंततः शोर को कम करने के लिए इसकी सदस्यता समाप्त करनी होगी। जो संभवतः आपके इरादे के विपरीत है।

टिप्पणी करने से पहले, कृपया सुनिश्चित करें कि आप कुछ ऐसा जोड़ रहे हैं जो पहले नहीं कहा गया था। यदि आप जो लिखना चाहते हैं, उसके समान टिप्पणी देखते हैं, तो इसके बजाय बस एक 👍 प्रतिक्रिया जोड़ें।

समझने के लिए धन्यवाद।
हम आपकी प्रतिक्रिया की सराहना करते हैं लेकिन कार्यों को प्राथमिकता देने में मदद करने के लिए पर्याप्त हैं।

कि आप कुछ ऐसा जोड़ रहे हैं जो पहले नहीं कहा गया था।

मैं पूछना चाहता हूं, क्या एक्सटेंशन के पिछले संस्करण को स्थापित करने का कोई तरीका है? दरअसल, अपडेट ने उस प्रवाह को तोड़ दिया, जिसका मैं इस्तेमाल करता था। दुर्भाग्य से, क्रोम एक्सटेंशन मार्केटप्लेस आपको 'एनपीएम' जैसे पिछले संस्करण को स्थापित करने की अनुमति नहीं देता है। क्या आपके पास संकलित एक्सटेंशन वाला लिंक है? धन्यवाद।
_(मैंने स्टैंडअलोन संस्करण स्थापित करने का प्रयास किया, लेकिन v3 रेपो से यह लिंक टूटा हुआ है, क्रोम एक्सटेंशन का लिंक नवीनतम संस्करण की ओर जाता है)_

नए DevTools में एक Profiler शामिल है जो आपके कोड में वास्तविक प्रदर्शन समस्याओं को खोजने में आपकी मदद करेगा।

और यहाँ एक उत्तर है, क्यों नए विस्तार ने मेरे प्रवाह को तोड़ दिया। प्रोफाइलर आपको शुरू करने के लिए बटन दबाने के लिए प्रोत्साहित करता है, फिर प्रोफाइलिंग समाप्त करने के लिए, लेकिन यह तत्काल नहीं है। अपडेट हाइलाइटर के साथ, आप बिना किसी अतिरिक्त चाल के सब कुछ देखते हैं। यह आपको बहुत सहज तरीके से वास्तविक अपडेट और वास्तव में क्या ट्रिगर किया गया है, यह भी दिखाता है।

यह मुझे Chrome DevTools के स्वयं के प्रदर्शन मॉनीटर की याद दिलाता है जो लाइव-अपडेट भी हुआ करता था और फिर किसी दिन प्रेस-टू-रिकॉर्ड में माइग्रेट कर दिया गया था। जटिलता और प्रदर्शन पर प्रभाव के कारण यह कदम शायद समझ में आया, लेकिन मुद्दा यह है कि यह बहुत अधिक घर्षण जोड़ता है (जैसा कि @ कार्डुएलिस बताते हैं, स्टार्ट/स्टॉप बटन दबाए जाने का तरीका आसान नहीं है)। यह Ooda लूप में एक रिंच फेंकता है, और इसमें कोई संदेह नहीं है कि उपयोगकर्ता कितनी बार इस सुविधा का उपयोग करते हैं, और बदले में ऐप की गुणवत्ता को प्रभावित करते हैं।

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

मैं पूछना चाहता हूं, क्या एक्सटेंशन के पिछले संस्करण को स्थापित करने का कोई तरीका है?

@Carduelis DevTools के पिछले संस्करण के लिए इंस्टॉलेशन निर्देश रिलीज़ ब्लॉग पोस्ट में शामिल हैं: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get- पुराने संस्करण-पीछे

मैं ऊपर दिए गए निर्देशों से क्रोम में v3 स्थापित करने की कोशिश कर रहा हूं, और परिवर्तनों को हाइलाइट करने के लिए स्टैंडअलोन प्रोफाइलर नहीं मिल सका। इसलिए मैंने विस्तृत चरण-दर-चरण निर्देश दिए हैं यदि आप इसे काम करना चाहते हैं और अपने घटकों को अनुकूलित करना चाहते हैं:

प्रतिक्रिया देव उपकरण V3 स्थापित करना (चरण-दर-चरण निर्देश) :
https://gist.github.com/oztune/01be16a2f90283aad82422b37221d522

अगर मैं थोड़ा शेखी बघार सकता हूं, जबकि तकनीकी स्तर पर यह "गहन प्रोफाइलिंग टूल"> "एक मूर्खतापूर्ण हाइलाइटिंग फीचर" जैसा लग सकता है, हम सभी सिर्फ इंसान हैं और हम सरल दृश्य संकेतों से बहुत सारी जानकारी जल्दी से इकट्ठा करते हैं, इसलिए कुछ मायनों में हाइलाइटिंग फीचर एक बहुत बड़ी बात है क्योंकि इसका उपयोग करना इतना आसान है। मेरे लिए यही कारण है कि मैं 90% समय प्रतिक्रिया देव उपकरण खोलता हूं।

अगर मैं थोड़ा शेखी बघार सकता हूं, जबकि तकनीकी स्तर पर यह "गहन प्रोफाइलिंग टूल"> "एक मूर्खतापूर्ण हाइलाइटिंग फीचर" जैसा लग सकता है, हम सभी सिर्फ इंसान हैं और हम सरल दृश्य संकेतों से बहुत सारी जानकारी जल्दी से इकट्ठा करते हैं, इसलिए कुछ मायनों में हाइलाइटिंग फीचर एक बहुत बड़ी बात है क्योंकि इसका उपयोग करना इतना आसान है।

मुझे नहीं लगता कि डैन या मैंने बहस की है कि यह "उपयोग करने में आसान" है, बस यह लोगों को "फिक्सिंग" चीजों में समय लगाने के लिए प्रोत्साहित कर सकता है जो "टूटी हुई" नहीं हैं (उर्फ उन चीजों को अनुकूलित करने पर जो धीमी नहीं हैं) . हमने इस पैटर्न को पहले "प्रदर्शन" लागतों की आशंका के कारण इनलाइन कार्यों के व्यापक परिहार जैसी चीजों के साथ देखा है। गैर-समस्याओं को ठीक करने में निवेश की गई ऊर्जा वह ऊर्जा है जिसे अन्य संभावित रूप से अधिक महत्वपूर्ण चीजों को ठीक करने में खर्च नहीं किया जाता है।

जैसा कि हमने ऊपर कहा , मुझे लगता है कि एक अच्छा मौका है कि हम प्रोफाइलर के हिस्से के रूप में देवटूल में किसी प्रकार का अपडेट फ्लैशिंग तंत्र वापस जोड़ सकते हैं।

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

अति-अनुकूलन के बारे में मैं यह प्रमाणित कर सकता हूं कि दृश्य रेंडर हाइलाइटिंग इसे प्रोत्साहित कर सकता है। इसलिए, मैं यहां चर्चा में कुछ जोड़ना चाहूंगा।

जो लोग इस सुविधा से चूक जाते हैं, उनके लिए आपको https://github.com/welldone-software/why-did-you-render अधिक जानकारीपूर्ण मिल सकता है।

यह सुविधा लागू होने पर विचार करने के लिए कुछ हो सकता है। डिफ़ॉल्ट रूप से, WhyDidYouRender एक गहरी मूल्य तुलना करता है और केवल तभी रिपोर्ट करता है जब चीजें वास्तव में पुन: प्रस्तुत करने के बीच नहीं बदलती हैं। दृश्य रेंडर हाइलाइट्स पर समान फ़िल्टरिंग करना बहुत अच्छा होगा। यह अधिक विचारशील अनुकूलन को निर्देशित करेगा (साथ ही यह एक भेद है जो प्रोफाइलर द्वारा वहन नहीं किया जाता है)।

सिद्धांत रूप में प्रदर्शन की चिंता के बिना पूरे ऐप को फिर से प्रस्तुत करना संभव होना चाहिए, इसलिए रेंडर हाइलाइटिंग को देखने से बचने के लिए हर जगह एससीयू जोड़ना एक उल्टा रास्ता है।

रिएक्ट कैसे काम करता है, इस पर प्रदर्शनों के लिए मुझे अभी भी रीरेंडर हाइलाइट उपयोगी लगा।

डिफ़ॉल्ट रूप से, WhyDidYouRender एक गहरी मूल्य तुलना करता है और केवल तभी रिपोर्ट करता है जब चीजें वास्तव में पुन: प्रस्तुत करने के बीच नहीं बदलती हैं।

यह उन ऐप्स के लिए बहुत धीमा लगता है जिनमें वास्तव में प्रदर्शन समस्याएं होती हैं। किसी भी प्रकार की गहरी तुलना निश्चित रूप से ऐसा कुछ नहीं है जिसे हम हमेशा करना चाहते हैं। उस बिंदु पर जब आप इसे चालू कर रहे हैं (धीमे पूर्ण में चुनने के लिए) तो क्यों न केवल प्रोफाइलर शुरू करें?

यह अधिक विचारशील अनुकूलन को निर्देशित करेगा (साथ ही यह एक भेद है जो प्रोफाइलर द्वारा वहन नहीं किया जाता है)।

प्रोफाइलर इसका एक संस्करण प्रदान करता है:

यदि आप एक घटक देखते हैं जो फिर से प्रस्तुत किया गया है, लेकिन कोई बदला हुआ प्रोप/राज्य/हुक नहीं है, तो आप जो वर्णन कर रहे हैं वह मुझे लगता है।

@bvaughn वैसे आप आम तौर पर एक समय में केवल एक घटक पर गहरी तुलना चालू करते हैं। इसलिए मैं मानता हूं कि यह ऐसा कुछ नहीं है जिसे आप डिफ़ॉल्ट रूप से सभी घटकों के लिए चालू करेंगे। शायद कुछ ऐसा जहां आप उस हरे रंग की पट्टी पर राइट क्लिक करें और "हाइलाइट रेंडर अपडेट" चुनें।
यह बहुत ही स्लीक और सुपर उपयोगी है, लेकिन यह एक ऐसी चीज है जिसके लिए आपको खुदाई करनी होगी।

@bvaughn मैं प्यार करता हूँ "यह क्यों प्रस्तुत किया?" सुविधा (अंतरिम में Highlight Updates फिर से विचार किया जाता है), लेकिन सभी उपलब्ध दस्तावेज़ों को पढ़ने और अपने यूट्यूब ट्यूटोरियल को स्किम करने के बाद, मैं अभी भी निश्चित नहीं हूं कि कुछ मामलों के लिए इसकी व्याख्या कैसे करें:

सहज नहीं है कि अंडरस्कोर का क्या अर्थ है:

यह प्रतिपादन क्यों किया?

• सहारा बदल गया: (__)

मैं केवल हुक एपीआई का उपयोग करता हूं, लेकिन अभी भी निश्चित अर्थ नहीं है:

यह प्रतिपादन क्यों किया?

• हुक बदल गया

इन मामलों के लिए एक वाक्य या दो स्पष्टीकरण होने का कोई मौका और शायद अन्य जिन्हें मुझे अभी तक स्पष्ट मामले के अलावा सामना करना पड़ा है जहां यह वास्तविक props / state को बदल देता है?

सहज नहीं है कि अंडरस्कोर का क्या अर्थ है:

ऐसा लगता है कि आपके ऐप में कुछ __ नामक प्रोप में गुजर रहा है और वह प्रोप कमिट्स के बीच बदल रहा है

मैं केवल हुक एपीआई का उपयोग करता हूं, लेकिन अभी भी निश्चित अर्थ नहीं है

कृपया देखें #16477

नमस्ते

मैं हाइलाइट अपडेट का बहुत उपयोग कर रहा था। मैं एक बार-बार ताज़ा करने वाला ऐप विकसित कर रहा हूं और मेरे दिन-प्रतिदिन के काम के लिए वह भविष्य मेरे लिए आवश्यक था।

मुझे वह समाधान मिलता है जो @bvaughn ने प्रस्तुत किया। यह बहुत उपयोगी है लेकिन मैं इसे अपने परिदृश्य में ताज़ा दर के लिए लागू नहीं कर सकता। मुझे प्रोफाइलिंग टूल के बजाय एक त्वरित संकेत की आवश्यकता है, जो कि शानदार BTW दिखता है।

क्या आप अभी भी इसे वापस लागू करने जा रहे हैं ?? यदि नहीं, तो मैं अपने रिएक्ट देव टूल्स को कैसे डाउनग्रेड कर सकता हूं, क्योंकि मैं इसके बिना विकसित नहीं हो सकता।

क्या आप अभी भी इसे वापस लागू करने जा रहे हैं ?? यदि नहीं, तो मैं अपने रिएक्ट देव टूल्स को कैसे डाउनग्रेड कर सकता हूं, क्योंकि मैं इसके बिना विकसित नहीं हो सकता।

@oztune द्वारा पहले ही उत्तर दिया जा चुका है।

मैं पुराने संस्करण को वापस कैसे प्राप्त करूं?
https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-the-old-version-back

कृपया मुझे पुराना संस्करण वापस चाहिए। इतनी कार्यक्षमता है कि नए में खो गया था और यह असंभव रूप से अनुपयोगी है

कृपया मुझे पुराना संस्करण वापस चाहिए। इतनी कार्यक्षमता है कि नए में खो गया था और यह असंभव रूप से अनुपयोगी है

यहां बताया गया है कि पुराने संस्करण को वापस कैसे लाया जाए, मेरे लिए काम किया:
https://gist.github.com/oztune/01be16a2f90283aad82422b37221d522

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

कृपया उन अनुपलब्ध कार्यक्षमताओं को नए संस्करण में वापस रखें।

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

इसके अलावा मैं अब राज्य के मूल्यों को क्यों नहीं बदल सकता ??

और प्रॉप्स बूलियन अब चेकबॉक्स नहीं हैं ?? वह बहुत अच्छा था। और फिर चला गया।

अब राज्य में बदलाव नहीं किया जा सकता है और मुझे उस असत्य/सत्य को टाइप करना होगा, इसके बजाय बस क्लिक करें और देखें कि एक घटक इस पर कैसे प्रतिक्रिया दे रहा है।

सुपर कष्टप्रद।

हाय @ पीएमस्टर्ड ,

मैं इस पर काम नहीं करता, मैं सिर्फ एक संभावित दृष्टिकोण का सुझाव दे रहा था कि अगर आपको नया पसंद नहीं है तो देव-उपकरण के पुराने संस्करण को वापस लाएं। इसने मेरे लिए काम किया।

मुझे यकीन है कि देव-उपकरणों पर काम करने वाली टीम (मुख्य रूप से ब्रायन वॉन मुझे लगता है?) अगर आप उनके लिए कुछ अलग मुद्दे बनाते हैं तो आपकी चिंताओं को ध्यान में रखेंगे।

और कुछ सराहना भी दिखाना न भूलें। हमें ये उपकरण मुफ्त में मिल रहे हैं :)
केवल रचनात्मक प्रतिक्रिया।

सादर,

एइनारो

यदि आपको तत्काल इस सुविधा की आवश्यकता है, तो आप एक पुराने संस्करण का उपयोग वैकल्पिक हल के रूप में कर सकते हैं: https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how -do-i-get-the -पुराना-संस्करण-वापस। मैं आपको प्रोफाइलर का उपयोग करने का प्रयास करने के लिए भी प्रोत्साहित करता हूं। हालांकि इसे चलाने के लिए थोड़ा अधिक प्रयास करना पड़ता है, लेकिन यह आपको बताता है कि कौन से री-रेंडर महत्वपूर्ण हैं और कौन से नहीं। केवल रेंडर नंबर गिनना अक्सर वास्तविक प्रदर्शन के मुद्दों से ध्यान भटकाने वाला होता है।

हम समझते हैं कि अनपेक्षित पुन: प्रस्तुत करने का एक हल्का तरीका मूल्यवान है। हमने https://github.com/facebook/react/issues/16437#issuecomment -523629000 में समझाया है कि यह हमारे रडार पर है और "मुझे इसकी आवश्यकता है" कहने वाली अधिक टिप्पणियां सहायक नहीं हैं। चूंकि इस थ्रेड ने "मुझे इसकी आवश्यकता है" टिप्पणियों को इकट्ठा करना जारी रखा है, इसलिए मैं अधिसूचना बाढ़ को कम करने के लिए इसे लॉक करने जा रहा हूं। कृपया निश्चिंत रहें आपकी आवाज सुनी जा रही है।

मैंने इस सुविधा को नए DevTools (#16989) में निम्नलिखित चेतावनियों के साथ लागू किया है:

• यह अभी के लिए केवल ब्राउज़र एक्सटेंशन (और react-devtools-inline NPM पैकेज) में सक्षम है, इसलिए यह केवल रिएक्ट डोम का समर्थन करता है।
• इसे लीगेसी रेंडरर्स (v15) के लिए लागू नहीं किया गया है, हालांकि इसे किसी के द्वारा जोड़ा जा सकता है यदि वे अनुवर्ती पीआर जमा करना चाहते हैं।

अब इस मुद्दे को बंद करना कि #16989 उतर रहा है। संभवतः आज नई सुविधा के साथ 4.2 जारी करेगा।