الحالة المشتقة وتجنّب عمليات التصيير الإضافية
فضّل القيم المشتقة على الحالة المكررة؛ واحفظ الحسابات الثقيلة مؤقتًا؛ وحافظ على مصدر واحد للحقيقة لتجنّب عمليات التصيير الإضافية.
الحالة المشتقة وتجنّب عمليات التصيير الإضافية درس مجاني في React Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Academy 3 دروس في المجموع.
ما الحالة المشتقة؟
الحالة المشتقة هي قيم تُحسب من الحالة أو الخصائص الموجودة (مثل fullName والإجماليات وعوامل التصفية). حافظ على مصدر واحد للحقيقة لتقليل الأخطاء وعمليات إعادة التصيير.
القواعد: الاشتقاق أم التخزين
- اشتقّ القيمة إذا كان بالإمكان إعادة حسابها من بيانات أخرى.
- خزّن فقط إدخال المستخدم أو بيانات الخادم التي لا يمكنك حسابها.
- احفظ القيم المشتقة الثقيلة مؤقتًا.
نمط مضاد: الحالة المكررة
تجنّب مزامنة الحالة المكررة. يحتفظ هذا المثال بـ fullName في الحالة ويحدّثها داخل تأثير، ما يجعل عدم التزامن سهل الحدوث ويؤدي إلى عمليات تصيير إضافية.
<div id="root"></div>
قيمة مشتقة (الطريقة الصحيحة)
احسب fullName من الاسم الأول واسم العائلة. لا حاجة إلى المزامنة، وعمليات إعادة التصيير أقل. استخدم useMemo إذا كان دمج البيانات يتطلب عملًا ثقيلًا.
<div id="root"></div>
حفظ العمل المشتق الثقيل مؤقتًا
بالنسبة إلى القيم المشتقة الثقيلة (مثل الفرز أو التنسيق)، استخدم useMemo حتى لا تُعاد حساب النتيجة إلا عند تغيّر المدخلات.
<div id="root"></div>
نصائح ومشكلات
تجنّب الحالة المكررة وتأثيرات المزامنة. فضّل القيم المشتقة واحفظ العمل الثقيل مؤقتًا. حافظ على دقة مصفوفات التبعيات لمنع البيانات القديمة.
أفضل ممارسة للحالة المشتقة
مراجعة
مراجعة: حافظ على مصدر واحد للحقيقة. احسب fullName والإجماليات وعوامل التصفية من البيانات الموجودة. احفظ العمل الثقيل مؤقتًا لتخطّي عمليات التصيير غير الضرورية.
الأسئلة الشائعة
هل درس «الحالة المشتقة وتجنّب عمليات التصيير الإضافية» مجاني؟
نعم — نص درس «الحالة المشتقة وتجنّب عمليات التصيير الإضافية» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Academy 3 دروس في المجموع.
ماذا ستتعلم في «الحالة المشتقة وتجنّب عمليات التصيير الإضافية»؟
فضّل القيم المشتقة على الحالة المكررة؛ واحفظ الحسابات الثقيلة مؤقتًا؛ وحافظ على مصدر واحد للحقيقة لتجنّب عمليات التصيير الإضافية. تتمرن على React Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ React Academy؟
لا تُشترط خبرة سابقة. React Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.
كم من الوقت يستغرق درس «الحالة المشتقة وتجنّب عمليات التصيير الإضافية»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس React Academy هذا؟
نعم. كل درس في React Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- إعادة التصيير مقابل عمليات Commit: متى نحسّن الأداء
- React.memo وuseMemo وuseCallback — عمليًا
- الحالة المشتقة وتجنّب عمليات التصيير الإضافية