रिएक्ट में नए प्रायोगिक प्रोफाइलर सुविधा का उपयोग कैसे करें

तो प्रतिक्रिया 16.4.0 निकली है! (नोट अनुवादक - यह सुविधा 16.4.0 संस्करण में जोड़ी गई थी, तब यह पोस्ट लिखी गई थी)। और ऐसे क्षणों में आप समझते हैं कि आप कैसे जावास्क्रिप्ट हैं - एक गीक अगर आप अपने पसंदीदा ढांचे के मामूली अपडेट का पालन करते हैं। बहुत बढ़िया!



यदि आप प्रतिक्रिया टीम द्वारा प्रकाशित संस्करण 16.4 के लिए जारी किए गए नोट्स को पढ़ते हैं, तो इस अपडेट को उबाऊ माना जाना चाहिए। पॉइंटर इवेंट आकर्षक दिखते हैं, लेकिन ईमानदार होने के लिए, मैंने पहले उनके बारे में बहुत कम सुना है।

इसके अलावा, एक तरह का नया getDerivedStateFromProps विधि के लिए getDerivedStateFromProps है (अब इसे हर रेंडर पर बुलाया जाएगा)। मैंने अभी तक इसका पर्याप्त उपयोग नहीं किया है, इसलिए मेरे लिए यह अपडेट बहुत महत्वपूर्ण नहीं था।

तब मैंने घोषणा को देखा, शीर्षकों के नीचे दफनाया गया था कि उन्होंने एक नया प्रायोगिक घटक, unstable_Profiler जोड़ा था। यह देखते हुए कि मेरा जीवन अब काफी अस्थिर है ( unstable_ ), मैंने आरएफसी को पढ़ने और इसे आज़माने का फैसला किया।

TLDR;

रिएक्ट टीम के लोग प्रतिपादन को अतुल्यकालिक बनाने की कोशिश कर रहे हैं । बढ़ते / अद्यतन करते समय घटकों को प्रस्तुत करना कब निर्धारित करना मुश्किल हो सकता है। इसलिए, वे इस चमकदार नए Profiler घटक के साथ गड़बड़ कर रहे हैं।

तो आज आप क्या उपयोग कर सकते हैं?

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

<Profiler /> का उपयोग करना

चेतावनी : शायद आपको उत्पादन में इसका उपयोग नहीं करना चाहिए (ठीक है, वास्तव में, यह unstable_ )। बाद में वे प्रोफ़ाइल और उत्पादन कोड की क्षमता समाप्त कर देंगे।

असल में, Profiler एक घटक है जिसे डिफ़ॉल्ट रिएक्ट पैकेज से निकाला जा सकता है। चूँकि इसका एक सतर्क अंडरस्कोर नाम है, जो कई लिंटर पर शपथ लेते हैं, आप इस प्रकार काम कर सकते हैं:

 import React, { unstable_Profiler as Profiler } from 'react'; ... const Profiler = React.unstable_Profiler; 

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

 import React, { unstable_Profiler as Profiler } from 'react'; class ComponentWithProfiling extends React.Component { state = { count: 0 }; logProfile = (id, phase, actualTime, baseTime, startTime, commitTime) => { console.log(`${id}'s ${phase} phase:`); console.log(`Actual time: ${actualTime}`); console.log(`Base time: ${baseTime}`); console.log(`Start time: ${startTime}`); console.log(`Commit time: ${commitTime}`); }; go = direction => () => this.setState(({ count }) => ({ count: direction === "up" ? count + 1 : count - 1 })); render() { return ( <Profiler id="app" onRender={this.logProfile}> <button onClick={this.go("up")}>️</button> <div>The count is {this.state.count}</div> <button onClick={this.go("down")}></button> </Profiler> ); } } 

ध्यान दें कि आपको प्रत्येक टुकड़े id एक id देनी होगी जिसे आप प्रोफाइल करते हैं। जैसा कि आप नीचे देख सकते हैं, onRender दिलचस्प मैट्रिक्स का एक गुच्छा स्वीकार करता है:


7jroojkv30.codesandbox.io

सबसे पहले, आप देख सकते हैं कि रेंडरिंग चरण क्या था (या तो mount या update ), जिसका उपयोग कोड के उन हिस्सों की पहचान करने के लिए किया जा सकता है जो अनपेक्षित रूप से अपडेट किए जाते हैं (ठीक उसी तरह जैसे उत्कृष्ट क्यों किया-आप-अपडेट पैकेज जो मैंने कई बार उपयोग किया और अत्यधिक अनुशंसा)।

अगला, हम actualTime और baseTime प्राप्त baseTime । वे वास्तविक समय से संबंधित हैं जो रिएक्ट गणना गणना पर खर्च करता है; यानी पता लगा कि क्या बदल गया है। कृपया ध्यान दें कि प्रारंभिक कनेक्शन (आरओ) का वास्तविक समय (प्रारंभिक समय) अपडेट समय से अधिक है। ऐसा इसलिए है क्योंकि प्रारंभिक कनेक्शन में, तकनीकी रूप से सब कुछ "नया" है। अपडेट करते समय, गणना सरल होनी चाहिए, क्योंकि, मुझे आशा है, पेड़ में घटकों को केवल तभी अपडेट किया जाता है जब वे वास्तव में बदल गए हों (अर्थात, जब प्रोप / राज्यों के मूल्य बदल गए हों)।

बड़े / वास्तविक दुनिया के अनुप्रयोगों में, यह डेटा आपको यह समझने में मदद करेगा कि कहां पर shouldComponentUpdate गलत तरीके shouldComponentUpdate उपयोग किया जाता है या बिल्कुल नहीं, उन स्थानों पर जहां संदर्भ प्रकारों के साथ प्रॉप्स अक्सर बदलते हैं या नए प्रॉप्स भेजे जाते हैं, या सिर्फ उन जगहों पर जहां आपको अपडेट के लिए इतने लंबे समय की उम्मीद नहीं थी।

आखिरी मान जो हमें onRender में onRender हैं, onRender हैं commitTime और commitTime । ये शुरुआती लॉन्च के बाद से वास्तव में टाइमस्टैम्प हैं। startTime वह समय है जिससे चयनित घटक रेंडरिंग के लिए गणना करना शुरू करता है, जबकि प्रतिबद्ध समय वह समय होता है जब React वास्तव में रेंडरिंग के लिए इन परिवर्तनों को प्रतिबद्ध करता है।

यदि आप टाइमस्टैम्प (जैसे क्लिक या कीस्ट्रोक्स) के साथ अन्य घटनाओं को ट्रैक करते हैं, तो ये मेट्रिक्स उपयोगकर्ता घटनाओं के होने पर और वास्तविक रेंडरिंग के बीच होने वाले डेल्टा को पहचानने में मदद कर सकते हैं। यदि अंतर बड़ा है, तो यह देरी उपयोगकर्ताओं के लिए हानिकारक हो सकती है और सावधानीपूर्वक जांच की जानी चाहिए।

निष्कर्ष

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

पहले अपनी प्रदर्शन समस्याओं को मापना महत्वपूर्ण है, इसलिए जब आप "सुधार" करते हैं तो आप यह बता सकते हैं कि क्या यह वास्तव में स्थिति में सुधार करता है या केवल बिगड़ता है। मैंने पाया कि प्रदर्शन का अनुकूलन उन चीजों में से एक है जिन पर आप बहुत समय बिता सकते हैं। इसलिए, इससे पहले कि आप कुछ का अनुकूलन करें। सुनिश्चित करें कि यह वास्तव में आवश्यक है।

मैं आगे देख रहा हूं कि भविष्य में रिएक्टर टीम प्रोइलर के साथ क्या करेगी। इस निफ्टी फीचर को जोड़ने के लिए @bvaughn को धन्यवाद!

अनुवादक से:
फिलहाल (वर्तमान संस्करण 16.6.0) प्रोवाइलर सर्वर-साइड रेंडरिंग के साथ काम नहीं करता है। फ़ीचर अनुरोध पहले से मौजूद है।