شرح صفوف ومحتوى الفقرة
بمجرد تغليف شجرة الميزة بوسم <TasksProvider>، يستطيع أي مكون فرعي عميق إرسال تحديثاته باستقلالية تامة. يقرأ شريط الإضافة useContext(TasksDispatchContext) لإرسال أمر added، بينما يرسل كل سطر مهمة أوامر toggled أو deleted مباشرة بمعرف المهمة id.
لاحظ التوازن الهندسي الدقيق هنا: تبقى مسودة النص المؤقتة التي يكتبها المستخدم داخل حقل الإدخال في useState محلي داخل شريط الإضافة، بينما تنتقل قائمة المهام المشتركة فقط إلى سياق المخفض عند الضغط على زر الإضافة.
HTML
function AddTaskButton() {
const dispatch = useContext(TasksDispatchContext);
function handleAdd() {
dispatch({
type: 'added',
id: Date.now(),
title: 'Review Context Pattern',
});
}
return <button onClick={handleAdd}>Add Task</button>;
}