Reducer Patterns أنماط المُقلِّلات
آخر تحديث: 2026-11-03
Reducer Patterns أنماط المُقلِّلات
تحافظ بضعة أنماط شائعة على نظافة المُقلِّلات: التهيئة الكسولة عبر الوسيط الثالث، والتحديثات غير القابلة للتعديل لحالة الكائن والمصفوفة، وحساب القيم المشتقّة أثناء العرض بدل تخزينها، وإعادة ضبط شجرة الحالة كلها بإجراء reset أو بتغيير مفتاح. وإتقان هذه الأنماط يُبقي حتى آلة الحالة المعقّدة نظيفة. والمبدأ المشترك أن يبقى المُقلِّل دالة خالصة، بينما كل ما هو غير خالص — نداءات الشبكة والمؤقّتات والتخزين — يحدث في معالجات الأحداث والآثار المحيطة به.
| المجموعة | الآثار الجانبية والأداء |
|---|---|
| النوع | نمط |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
// تهيئة كسولة: تُحسب الحالة الأولية من وسيط
const [state, dispatch] = useReducer(reducer, props, init)
// أعد ضبط شجرة الحالة بالكامل
case 'reset': return init(props)
// قوالب التحديث غير القابل للتعديل للمصفوفات
[...state, item] // إضافة
state.filter(i => i.id !== id) // حذف
state.map(i => i.id === id ? { ...i, done: true } : i) // تعديلالقيمة المرجعة：لا قيمة معادة؛ فهذه المدخلات تصف نمط برمجة لا دالة.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
«Next» يضيف إلى المسار، و«Back» يرجع خطوة، و«Reset» يعود إلى البداية دفعة واحدة — ويوضّح المثال التهيئة الكسولة ونمط إعادة الضبط.💡 النقاط الأساسية
💡 نصيحة الوسيط الثالث ينفّذ التهيئة الكسولة: استخدمه حين تعتمد الحالة الابتدائية على props أو تكون مكلفة الحساب، فهو لا يُنفَّذ إلا عند إنشاء الحالة.
ℹ️ ملاحظة لإعادة ضبط حالة مكوّن يمكنك أيضاً تغيير مفتاح العنصر الخارجي، <Wizard key={resetId} />، فتُعاد بناء الشجرة الفرعية كلها بحالة جديدة.
⚠️ تحذير القيم المشتقّة مثل طول القائمة أو هل كل شيء محدَّد تُحسب أثناء العرض، لا تُخزَّن في الحالة حيث يتنافس مصدرا حقيقة.
🏷️ المزيد من الآثار والأداء
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س متى أستخدم الوسيط الثالث لـ useReducer؟
ج حين يجب حساب الحالة الابتدائية من props أو كانت باهظة البناء: استخدم useReducer(reducer, props, init) ولا يُنفَّذ init إلا مرة واحدة.
س كيف أعيد ضبط حالة المُقلِّل كلها؟
ج عرّف إجراء reset يعيد init(...)؛ أو امنح المكوّن مفتاحاً جديداً، فيتخلّى React عن شجرة الحالة القديمة.
س ماذا لو كان تحديث الكائنات المتداخلة مطوّلاً؟
ج انشر كل مستوى بـ {...a, ...b} أو قسّم الحالة على مساراتها؛ وللحالات الكبيرة فكّر في immer أو في الشكل المُطبَّع المستعمل في مكتبات الحالة.
