React Academy · درس

استخدام علامة Profiler

سجّلوا عمليات التصيير واقرؤوا المخططات اللهبية وحدّدوا المكوّنات البطيئة

استخدام علامة Profiler درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 4 دروس في المجموع.

مرحبًا

ستستخدمون في هذا الدرس React DevTools Profiler لتسجيل عمليات العرض، وقراءة المخططات اللهبية، وتحديد المكوّنات التي تسبب اختناقات في الأداء.

فتح Profiler

انقروا على علامة التبويب **Profiler** في React DevTools (بجانب Components). سترون زر Record (دائرة) وزر Reload and Profile. لا يعمل Profiler إلا في وضع التطوير.

تسجيل جلسة

انقروا على **Record** (الدائرة)، وتفاعلوا مع تطبيقكم (مثلًا، انقروا على زر أو اكتبوا في حقل إدخال)، ثم انقروا على **Stop** (المربع). تسجّل DevTools كل عملية عرض حدثت أثناء الجلسة.

قراءة المخطط اللهبي

يعرض المخطط اللهبي شريطًا واحدًا لكل مكوّن في كل عملية إرسال. العرض = الوقت المستغرق في العرض. والتراصات الطويلة = أشجار مكوّنات عميقة. مرّروا المؤشر فوق شريط لرؤية اسم المكوّن ومدة العرض الدقيقة.

الخط الزمني لعمليات الإرسال

في أعلى Profiler، سترون صفًا من الأشرطة الصغيرة، شريطًا واحدًا لكل عملية إرسال في React. تمثّل الأشرطة الأطول عمليات إرسال أبطأ. انقروا على شريط للانتقال إلى المخطط اللهبي لعملية الإرسال تلك.

لماذا أعاد المكوّن التصيير؟

حدّد مكوّناً في المخطط اللهبي، ثم اطّلع على قسم **لماذا أعاد هذا المكوّن التصيير؟** يوضّح القسم ما إذا كان المكوّن قد أعاد التصيير بسبب تغيّر الخصائص، أو تغيّر الحالة، أو إعادة المكوّن الأب للتصيير.

الأشرطة الرمادية مقابل الملوّنة

تعني الأشرطة الرمادية أن المكوّن **لم يُصَيَّر** في عملية التثبيت هذه (أعاد React استخدام الناتج السابق). أما الأشرطة الملوّنة فتعني أنه أعاد التصيير — وتشير الألوان الداكنة إلى أوقات تصيير أطول.

عرض المخطط المرتّب

بدّل من Flame Graph إلى مخطط **Ranked** باستخدام زر التبديل في الأعلى. يعرض هذا المخطط جميع المكوّنات التي صُيّرت، مرتّبةً حسب مدة التصيير، ما يسهّل اكتشاف المكوّن الأبطأ فوراً.

التسجيل وإعادة التحميل

انقر على **Reload and Profile** بدلاً من Record لالتقاط تحميل الصفحة، بما في ذلك عمليات التصيير الأولية. يساعدك ذلك على العثور على المكوّنات البطيئة عند تركيبها لأول مرة.

تمكين Profiling في بيئة الإنتاج

تعطّل إصدارات الإنتاج Profiler افتراضياً. لإجراء profiling في الإنتاج، أنشئ الإصدار باستخدام `react-dom/profiling` كاسم مستعار و`scheduler/tracing-profiling`. تجري معظم الفرق profiling في بيئة التطوير أولاً.

تحقّق سريعاً

في المخطط اللهبي لـ React DevTools Profiler، ماذا يمثّل عرض الشريط؟

مراجعة

يمكنك الآن تسجيل جلسة باستخدام Profiler، وقراءة المخططات اللهبية والمخططات المرتّبة، والتحقق من سبب إعادة تصيير أحد المكوّنات، واستخدام المخطط الزمني لعمليات التثبيت للانتقال بين عمليات التصيير.

الدرس التالي: **تصحيح أخطاء React الشائعة** — ستشخّص تحذيرات المفاتيح المفقودة، وأخطاء الحالة غير المعرّفة، وحالات عدم تطابق hydration باستخدام DevTools ووحدة تحكّم المتصفح.

الأسئلة الشائعة

هل درس «استخدام علامة Profiler» مجاني؟

نعم — نص درس «استخدام علامة Profiler» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 4 دروس في المجموع.

ماذا ستتعلم في «استخدام علامة Profiler»؟

سجّلوا عمليات التصيير واقرؤوا المخططات اللهبية وحدّدوا المكوّنات البطيئة تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟

لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «استخدام علامة Profiler»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟

نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى React Academy