React: وظيفة أداء التسوية مقابل مكونات الفئة
هل تريد طلب ميزة أو الإبلاغ عن خطأ ؟
لا / علة
ما هو السلوك الحالي؟
أثناء ترحيل مكونات الفئة إلى مكونات وظيفية (مع الخطافات) ، لاحظت انخفاضًا كبيرًا في الأداء . لدي مكون (يسمى TreeNodeComponent ) وهو جزء من هيكل شجرة. اعتمادًا على حجم الشجرة ، يمكن أن تكون مئات الأمثلة مرئية.
يؤدي تغليف مكون الوظيفة في PureComponent إلى تقليل "وقت العرض"
"وقت العرض" ، لوحظ في أدوات تطوير Chrome
مفهوم:
يعرض التطبيق مئات من هذه TreeNodeComponent في tree-structure . عندما يتم تحديث أحد الوالدين ، يجب التوفيق بين جميع الأطفال المباشرين.
المشروع: https://github.com/thomasnordquist/MQTT-Explorer
ما هو السلوك المتوقع؟
أداء مشابه بين المكونات الوظيفية والفئة.
ما إصدارات React وأي متصفح / نظام تشغيل متأثر بهذه المشكلة؟
OSX
الكروم 73 / إلكترون 5.0.5
رد فعل 16.8
تطبعي و Webpack
thomasnordquist
ال 3 كومينتر
يؤدي تغليف مكون الوظيفة في PureComponent إلى تقليل "وقت العرض" الملحوظ بشكل ملحوظ. (من 160 مللي ثانية إلى 60 مللي ثانية)
هذا متوقع إذا كان عرض TreeNodeComponent مكلفًا. يخرج React.PureComponent بكفالة مبكرًا إذا لم تتغير الدعائم.
أثناء ترحيل مكونات الفئة إلى مكونات وظيفية (مع الخطافات) ، لاحظت انخفاضًا كبيرًا في الأداء.
هل تقول أن الانتقال من فئة تمتد React.Component إلى مكون دالة تسبب في تراجع الأداء؟ أم أنك تستخدم بالفعل React.PureComponent (أو shouldComponentUpdate )
يمكنك استخدام React.memo للحصول على نفس دلالات الإنقاذ مع مكونات الوظيفة.
aweary
في ١١ يوليو ٢٠١٩
لقد تم الترحيل من React.Component بـ shouldComponentUpdate .
أستخدم React.useMemo لتجنب "التقديم".
ينتج عن React.memo نتائج جيدة مثل تلك الناتجة عن PureComponent . (~ 50-60 مللي ثانية)
شكرا جزيلا للتوضيح.
thomasnordquist
في ١١ يوليو ٢٠١٩
لم أحصل على ما هو أفضل: المكونات الوظيفية أو مكونات الطبقة. ما الذي يجب علي استخدامه للقوائم الطويلة
TheMisir
في ٢٧ نوفمبر ٢٠١٩
القضايا ذات الصلة
bloodyowl
·
3تعليقات
jmullo
·
3تعليقات
varghesep
·
3تعليقات
jimfb
·
3تعليقات
trusktr
·
3تعليقات
التعليق الأكثر فائدة
هذا متوقع إذا كان عرض
TreeNodeComponentمكلفًا. يخرجReact.PureComponentبكفالة مبكرًا إذا لم تتغير الدعائم.هل تقول أن الانتقال من فئة تمتد
React.Componentإلى مكون دالة تسبب في تراجع الأداء؟ أم أنك تستخدم بالفعلReact.PureComponent(أوshouldComponentUpdate)يمكنك استخدام
React.memoللحصول على نفس دلالات الإنقاذ مع مكونات الوظيفة.