في هذا الدرس 6تصفّح المواضيع
في علوم الحاسب والرياضيات، تلتزم الدالة النقية (Pure Function) بشرطين حاسمين؛ أولاً أنها لا تغير ما خارجها فلا تعدّل أي كائن أو متغير كان موجوداً قبل استدعائها، وثانياً ثبات النتيجة لنفس المدخلات فمتى استقبلت نفس القيم أعادت نفس النتيجة الحتمية تماماً. صُممت مكتبة React بحيث تعمل كل دالة مكون كدالة نقية تحول الخصائص إلى واجهة مطابقة.
import { StrictMode } from 'react';
function InvoiceLine({ seats, unitPrice }) {
const subtotal = seats * unitPrice;
return (
<div className="rx-card">
<p>{seats} × ${unitPrice} = ${subtotal}</p>
</div>
);
}ماذا يحدث عندما يكسر المكون قاعدة النقاء بتعديل متغير خارجي مثل guestCount++ أو الإضافة المباشرة داخل مصفوفة خارجية أثناء الرسم؟ ستظهر أرقام وعناصر مكررة ومتقلبة بحسب ترتيب التنفيذ، وهنا يبرز دور الغلاف الرقابي <StrictMode> الذي يتعمد استدعاء دوال المكونات مرتين في وضع التطوير لفضح أي تعديل غير نقي فوراً وإصلاحه عبر تمرير الخصائص الصريحة.
تحظر قاعدة النقاء تعديل الكائنات الموجودة قبل استدعاء التصيير فقط. أما إنشاء مصفوفة أو كائن جديد داخل دالة المكون نفسها ثم تعبئته عبر push() خلال نفس عملية الرسم فيُعد تعديلاً محلياً آمناً (Local Mutation) ونقياً بنسبة 100%؛ لأن هذا المتغير وُلد محلياً ولا يؤثر في أي جزء خارجي من التطبيق.
function StarRating({ score }) {
const stars = [];
for (let i = 1; i <= 5; i++) {
const icon = i <= score ? '★' : '☆';
stars.push(<span key={i}>{icon}</span>);
}
return <div className="rx-card">{stars}</div>;
}بطبيعة الحال، تحتاج التطبيقات التفاعلية في النهاية إلى إحداث تغييرات فعلية؛ كالاستجابة لنقرات الأزرار أو إرسال النماذج للخادم أو حفظ الإعدادات. تُسمى هذه العمليات الخارجية التأثيرات الجانبية (Side Effects)، ومكانها الطبيعي في React هو دوال معالجة الأحداث التي ستتقنها بدءاً من الوحدة الرابعة في الدرس السادس عشر، وليس أثناء حساب شجرة العرض مطلقاً.
يتكامل نقاء المكونات مع معمارية تدفق البيانات أحادي الاتجاه (One-Way Data Flow)؛ حيث تستقر البيانات في المكون الأب المالك وتنساب تنازلياً باتجاه واحد كخصائص للقراءة فقط نحو الأبناء. وعندما يحتاج مكون فرعي لترتيب قائمة قادمة من الأب للعرض، ينشئ نسخة أولاً عبر [...items].sort(...) دون المساس بترتيب مصفوفة الأب الأصلية.
function Leaderboard({ scores }) {
const copy = [...scores];
copy.sort((a, b) => b.points - a.points);
return (
<ol className="rx-card">
{copy.map((s) => (
<li key={s.id}>{s.team}: {s.points}</li>
))}
</ol>
);
}في ختام الوحدة الثالثة وقبل الانتقال إلى معالجة الأحداث وحالة المكون في الوحدة الرابعة، طبّق قائمة الفحص الهندسية التالية لضمان نقاء جميع مكوناتك وتوافقها التام مع التدفق أحادي الاتجاه:
| العملية داخل دالة المكون | حالة النقاء الهندسي | الممارسة القياسية في React |
|---|---|---|
| قراءة الخصائص وحساب ثوابت مشتقة | نقي بنسبة 100% | احسب القيم المشتقة مباشرة أثناء التصيير |
| تعبئة مصفوفة وليدة داخل نفس الدالة | نقي (نطاق محلي) | مسموح طالما أُنشئت المصفوفة داخل نفس الاستدعاء |
استدعاء props.list.sort() مباشرة | تعديل خارجي محظور! | انسخ أولاً عبر [...props.list].sort() |
| تغيير متغير عام أو خصائص المتصفح بالعرض | تأثير جانبي غير نقي! | لا تنفذه أثناء الرسم بل انقله لمعالجات الأحداث |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس مبدأ نقاء دوال المكونات في React، ولاحظت كيف يكشف StrictMode التعديلات الخارجية مبكراً، وميزت بين التعديل المحلي الآمن والتأثيرات الجانبية، ونظمت الواجهات بتدفق البيانات التنازلي أحادي الاتجاه. الخطوة التالية: انتقل الآن إلى الدرس رقم 16 «التعامل مع الأحداث التفاعلية في React» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Pure Component Function دالة المكون النقية
- دالة مكون لا تعدّل أي متغيرات خارجية سابقة وتعيد دائماً نفس بنية JSX لنفس قيم الخصائص.
- للمراجعة
- 02 Local Mutation التعديل المحلي الآمن
- تعبئة أو تعديل مصفوفة أو كائن أُنشئ للتو داخل نفس استدعاء التصيير دون المساس بأي مرجع خارجي.
- للمراجعة
- 03 Side Effect التأثير الجانبي
- أي عملية تغير العالم الخارجي كطلبات الشبكة أو المؤقتات، وينبغي عزلها خارج منطق الرسم النقي.
- للمراجعة
- 04 One-Way Data Flow تدفق البيانات أحادي الاتجاه
- النمط المعماري في React حيث تنساب البيانات من الأعلى إلى الأسفل من الأب المالك إلى الأبناء عبر خصائص للقراءة فقط.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 FP FP
- Functional Programming
- نمط البرمجة الدالية المرتكز على الدوال النقية وعدم تعديل البيانات مباشرة وهو أساس React الحديثة.
- للمراجعة
- 02 UI UI
- User Interface
- تُمثَّل في React كدالة حتمية نقية تعتمد مخرجاتها حصرياً على الخصائص والحالة.
- للمراجعة
- 03 JSX JSX
- JavaScript XML
- التوصيف التصريحي للواجهة الذي تعيده دوال المكونات النقية دون إحداث آثار جانبية.
- للمراجعة
- 04 DOM DOM
- Document Object Model
- تتولى React تحديثها بأمان بعد انتهاء مرحلة الحساب النقي بدلاً من تعديلها يدوياً أثناء الرسم.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال StarRating في محرر التجريب وأضف سطراً ثالثاً بدرجة 4 نجوم وتأكد من ثبات النتيجة تحت غلاف StrictMode.
-
افتح مثال Leaderboard في محرر التجريب واعكس معادلة الترتيب تصاعدياً مع الحفاظ على نسخ المصفوفة بمعامل الانتشار.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
ما الشرطان الأساسيان اللذان يحققان نقاء دالة المكون في React؟
لا تعدل المتغيرات أو الكائنات الخارجية الموجودة مسبقاً، وتعيد نفس JSX دائماً لنفس المدخلات.
كيف يساعد الغلاف <StrictMode> في كشف المكونات غير النقية مبكراً أثناء التطوير؟
يتعمد استدعاء دوال المكونات مرتين في وضع التطوير لفضح أي تعديل خارجي غير نقي فوراً.
يستمر الاستدعاء المزدوج لغلاف <StrictMode> في نسخة الإنتاج النهائية ويبطئ المتصفح لدى المستخدمين.
خطأ؛ يعمل الفحص المزدوج في بيئة التطوير فقط ولا يضيف أي عبء على نسخة الإنتاج النهائية.
لماذا يُعد إنشاء const stars = [] داخل دالة المكون وتعبئتها بـ stars.push(...) أثناء الرسم عملاً نقياً وآمناً؟
لأن المصفوفة أُنشئت محلياً للتو داخل نفس استدعاء الرسم ولا تؤثر في أي متغير خارجي سابق.
لماذا يجب كتابة [...scores].sort(...) بدلاً من scores.sort(...) مباشرة عند ترتيب مصفوفة قادمة عبر props؟
لأن دالة sort تعدل المصفوفة الأصلية في مكانها، فينشئ معامل الانتشار نسخة محلية جديدة لترتيبها بأمان.
أين ينبغي وضع التأثيرات الجانبية الناتجة عن تفاعل المستخدم مثل حفظ البيانات عند النقر على زر؟
توضع التأثيرات التفاعلية داخل دوال معالجة الأحداث وليس أثناء حساب شجرة العرض.
في معمارية التدفق أحادي الاتجاه في React، تنساب البيانات تنازلياً من المكونات الأب إلى الأبناء عبر الخصائص.
صواب؛ فهذا المسار التنازلي الواضح يسهّل تتبع مصدر أي قيمة وصيانة التطبيقات الكبيرة.
تُعد زيادة متغير عام خارجي مثل renderCounter++ داخل جسم المكون أثناء الرسم ممارسة نقية موصى بها.
خطأ؛ فتعديل المتغيرات الخارجية أثناء الرسم يكسر نقاء المكون ويسبب نتائج غير متوقعة.
ما الميزة التشخيصية الكبرى التي يمنحها تدفق البيانات أحادي الاتجاه لفرق التطوير؟
يسهل تتبع أي قيمة معروضة صعوداً عبر شجرة المكونات للوصول سريعاً إلى المكون المالك لمصدرها.
يمكّن خلو دوال الرسم من التأثيرات الجانبية مكتبة React من إيقاف أو إعادة التصيير بأمان دون إفساد حالة التطبيق.
صواب؛ فنقاء التصيير هو الأساس المعماري لسرعة وموثوقية التحديثات في React الحديثة.