ماذا يعني رفع الحالة لأعلى (Lifting State Up)؟

Question

IT Interview Practice · Accepted Answer

**رفع الحالة لأعلى** يعني نقل الحالة من مكون فرعي إلى **مكون أب مشترك** حتى يتمكن عدة مكونات فرعية من مشاركة والبقاء في تزامن مع نفس البيانات. إنه الحل القياسي عندما تحتاج المكونات الشقيقة إلى التنسيق. ## المشكلة: المكونات الشقيقة تحتاج إلى بيانات مشتركة ```jsx // ❌ each child has its OWN state — they can't sync function TempInput() { const [temp, setTemp] = useState(0); ... } // Two sibling TempInputs (Celsius & Fahrenheit) can't see each other's value ``` إذا احتفظ كل مكون من المكونات الشقيقة برسختها الخاصة من الحالة ذات الصلة، فلا توجد طريقة للحفاظ على اتساقها — تغيير أحدها لا يؤثر على الآخر. ## الحل: رفع الحالة إلى المكون الأب ```jsx function Calculator() { const [temperature, setTemperature] = useState(0); // state LIFTED to the parent return ( <> {/* pass state DOWN as a prop, and a setter to update it */}

Both inputs share one value: {temperature}

); } function TempInput({ value, onChange }) { return onChange(e.target.value)} />; } ``` الحالة المشتركة تعيش الآن في المكون الأب (`Calculator`). يمررها *لأسفل* كـ prop وكـ setter حتى يتمكن المكونات الفرعية من طلب التغييرات (*لأعلى*). الآن يعكس كلا الإدخالين نفس المصدر — تحرير أحدهما يحدّث كليهما. ## النمط ```text 1. Find the closest COMMON ancestor of the components that need to share 2. Move the state UP into that ancestor 3. Pass the value DOWN as props 4. Pass a callback DOWN so children can request updates (data up via events) ``` هذا هو نفس التدفق "البيانات لأسفل، الأحداث لأعلى"، المطبق لجعل الحالة مشتركة. ## عندما يصبح الرفع مرهقاً ```text Lifting too high (state ends up far from where it's used) → prop drilling. At that point, prefer Context or a state library instead of lifting further. ``` ## لماذا يهمك ذلك رفع الحالة لأعلى هو التقنية الأساسية لـ **مشاركة الحالة بين المكونات الشقيقة/ذات الصلة** في الأطر القائمة على المكونات — فهو يحافظ على مصدر واحد موثوق في مكون أب مشترك حتى تبقى المكونات الفرعية في تزامن. غالباً ما تكون الأداة *الأولى* التي يجب اللجوء إليها قبل إضافة Context أو store. التعرف على متى يجب الرفع (المكونات الشقيقة تحتاج إلى التنسيق) — ومتى يصبح الرفع مفرطاً (مما يسبب prop drilling، لذا حان الوقت لـ Context/store) — يعتبر أساسياً لهيكلة حالة المكونات بشكل جيد.

المشكلة: المكونات الشقيقة تحتاج إلى بيانات مشتركة

الحل: رفع الحالة إلى المكون الأب

النمط

عندما يصبح الرفع مرهقاً

لماذا يهمك ذلك

أسئلة ذات صلة