تزويد شجرة المكونات بالقيمة | مشاركة البيانات بعمق عبر createContext وuseContext

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

يكتسب السياق حيويته الكاملة عند دمجه مع حالة تفاعلية عبر useState أو useReducer في المكون الأب. فكلما تغيرت القيمة المسندة إلى خاصية value={plan} في المزود، تعيد React تلقائياً رسم كل مكون فرعي يستدعي useContext(PlanContext) بأسفله، دون أن تمر أي خاصية عبر المكونات الوسيطة.

الصف 2 صورة توضيحية

مخطط شجري يوضح بث البيانات مباشرة من مزود السياق في الجذر إلى المكونات الفرعية العميقة عبر useContext

الصف 3 كود برمجي

HTML

function Dashboard() {
  const [plan, setPlan] = useState('Pro');
  return (
    <PlanContext.Provider value={plan}>
      <Sidebar />
      <button onClick={() => setPlan('Team')}>
        Upgrade Plan
      </button>
    </PlanContext.Provider>
  );
}

جرّب بنفسك

الصف 4 ملاحظة هامة

Providing Context Values Tree تزويد شجرة المكونات بالقيمة

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (مشاركة البيانات بعمق عبر createContext وuseContext)