شرح صفوف ومحتوى الفقرة
بدلاً من دمج المصفوفة ودالة الإرسال في كائن سياق واحد، يوصي التوثيق الهندسي الرسمي لمكتبة React بإنشاء سياقين منفصلين تماماً:
- سياق القراءة
TasksContext: يزود المكونات العارضة والعدادات بمصفوفة المهام الحالية. - سياق الإرسال
TasksDispatchContext: يزود النماذج وأزرار التحكم بدالةdispatchلإرسال أوامر الإضافة والتبديل والحذف.
وبما أن React تضمن ثبات هوية دالة dispatch عبر التصييرات المتتالية، فإن المكونات التي تستهلك سياق الإرسال فقط مثل نموذج إضافة مهمة جديدة لا تضطر لإعادة تصيير نفسها عند تبديل حالة مهمة أخرى في القائمة.
HTML
const TasksContext = createContext(null);
const TasksDispatchContext = createContext(null);
function DualWire({ tasks, dispatch, children }) {
return (
<TasksContext.Provider value={tasks}>
<TasksDispatchContext.Provider value={dispatch}>
{children}
</TasksDispatchContext.Provider>
</TasksContext.Provider>
);
}