التحدي: إعادة هيكلة تطبيق عرض التعليقات البطيء

بيان المشكلة

لقد كُلفت بمهمة تصحيح أخطاء ميزة صغيرة في React تسمىCommentViewer واجهة مستخدم مدمجة تعرض قائمة بتعليقات المستخدمين إلى جانب ملخص تحليلي مباشر. قاعدة البيانات صغيرة، وتتكون من ثلاثة مكونات فقط:App ،CommentList ، وStatsPanel ومع ذلك، يبلغ المستخدمون عن وجود تأخير ملحوظ عند الكتابة أو تصفية التعليقات أو عند وصول بيانات جديدة.

عند فحص أداة تحليل الأداء، ستلاحظ العديد من مشكلات الأداء:

• CommentList يعيد العرض بشكل مفرط، على الرغم من أنه مغلف بـReact.memo .

• StatsPanel يقوم بإجراء عمليات حسابية معقدة مع كل ضغطة مفتاح.

• App يؤدي ذلك إلى إنشاء خصائص مشتقة غير مستقرة، مما يفرض عملاً غير ضروري في جميع أنحاء شجرة المكونات.

هدفك هو إعادة هيكلة هذا التطبيق بحيث يتصرف مثل شجرة مكونات React 19 المصممة بشكل جيد: هويات مستقرة، وحدود مذكرات ذات معنى، واستخدام صحيح للمحددات، وتفاعلات سلسة وسريعة الاستجابة. ...