شرح صفوف ومحتوى الفقرة
تأمل التحول الذي يطرأ على ملفات الواجهة بعد نقل حالة النطاق المشتركة إلى وحدة المخفض والسياق: لم تعد مكونات التخطيط مثل App وWorkspaceLayout تعرّف عشرات دوال المعالجة أو تمرر خصائص لا تستخدمها بنفسها.
يصبح كل مكون واجهة قصيراً ومقروءاً ومتفرغاً لوظيفته البصرية والتفاعلية؛ فإما أن يقرأ ما يحتاجه من TasksContext لحساب شريط الإنجاز، أو يرسل كائن حدث واضح الدلالة عند النقر.
HTML
function TaskSummary() {
const tasks = useContext(TasksContext);
const done = tasks.filter((t) => t.done).length;
return (
<header className="summary">
<h4>Completed: {done} / {tasks.length}</h4>
</header>
);
}