React: सुलह प्रदर्शन समारोह बनाम वर्ग घटक

को निर्मित 11 जुल॰ 2019 · 3टिप्पणियाँ · स्रोत: facebook/react

क्या आप किसी सुविधा का अनुरोध करना चाहते बग की रिपोर्ट करना चाहते हैं?
न तो/बग

वर्तमान व्यवहार क्या है?
वर्ग घटकों को कार्य घटकों (हुक के साथ) में माइग्रेट करते समय, मैंने एक महत्वपूर्ण प्रदर्शन ड्रॉप देखा। मेरे पास एक घटक है (जिसे TreeNodeComponent कहा जाता है) जो वृक्ष-संरचना का हिस्सा है। पेड़ के आकार के आधार पर, सैकड़ों उदाहरण देखे जा सकते हैं।

प्योरकंपोनेंट में फंक्शन कंपोनेंट को लपेटने से देखे गए "रेंडर टाइम" में काफी कमी आई है। (~ 160ms से ~ 60ms तक)

"रेंडर टाइम", क्रोम देव टूल्स में देखा गया

Bildschirmfoto 2019-07-11 um 16 24 10

संदर्भ:

ऐप इनमें से सैकड़ों TreeNodeComponent को tree-structure । जब माता-पिता को अद्यतन किया जाता है, तो सभी प्रत्यक्ष बच्चों को समेटने की आवश्यकता होती है।
परियोजना: https://github.com/thomasnordquist/MQTT-Explorer

अपेक्षित व्यवहार क्या है?
कार्यात्मक और वर्ग घटकों के बीच तुलनीय प्रदर्शन।

रिएक्ट के कौन से संस्करण और कौन से ब्राउज़र/ओएस इस समस्या से प्रभावित हैं?

ओएसएक्स
क्रोमियम 73 / इलेक्ट्रॉन 5.0.5
प्रतिक्रिया १६.८
टाइपप्रति और वेबपैक

स्रोत

thomasnordquist

सबसे उपयोगी टिप्पणी

प्योरकंपोनेंट में फंक्शन कंपोनेंट को लपेटने से देखे गए "रेंडर टाइम" में काफी कमी आई है। (~ 160ms से ~ 60ms तक)

यह अपेक्षित है यदि TreeNodeComponent का प्रतिपादन महंगा है। React.PureComponent अगर प्रॉप्स नहीं बदले हैं तो जल्दी निकल जाते हैं।

वर्ग घटकों को कार्य घटकों (हुक के साथ) में माइग्रेट करते समय, मैंने एक महत्वपूर्ण प्रदर्शन ड्रॉप देखा।

क्या आप कह रहे हैं कि किसी फ़ंक्शन घटक के लिए React.Component का विस्तार करने वाली कक्षा से जाने से प्रदर्शन प्रतिगमन हुआ? या आप पहले से ही React.PureComponent (या shouldComponentUpdate ) का उपयोग कर रहे थे

फ़ंक्शन घटकों के साथ समान खैरात शब्दार्थ प्राप्त करने के लिए आप React.memo का उपयोग कर सकते हैं।

aweary 11 जुल॰ 2019

👍2

सभी 3 टिप्पणियाँ

प्योरकंपोनेंट में फंक्शन कंपोनेंट को लपेटने से देखे गए "रेंडर टाइम" में काफी कमी आई है। (~ 160ms से ~ 60ms तक)

वर्ग घटकों को कार्य घटकों (हुक के साथ) में माइग्रेट करते समय, मैंने एक महत्वपूर्ण प्रदर्शन ड्रॉप देखा।

aweary 11 जुल॰ 2019

👍2

मैंने React.Component से shouldComponentUpdate साथ माइग्रेट किया।

मैं "प्रतिपादन" से बचने के लिए React.useMemo का उपयोग करता हूं।
React.memo से उतने ही अच्छे परिणाम मिलते हैं जितने PureComponent । (~ 50-60ms)

स्पष्ट करने के लिए धन्यवाद।

thomasnordquist 11 जुल॰ 2019

👍1

मुझे वह नहीं मिला जो बेहतर प्रदर्शन कर रहा है: कार्यात्मक घटक या वर्ग घटक। लंबी सूचियों के लिए मुझे क्या उपयोग करना चाहिए

TheMisir 27 नव॰ 2019

👍1

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

React: सुलह प्रदर्शन समारोह बनाम वर्ग घटक

"रेंडर टाइम", क्रोम देव टूल्स में देखा गया

संदर्भ:

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों