رفع الحالة: كيف تتواصل مكونات الطفل مع أولياء الأمور

يستخدم React تدفق البيانات في اتجاه واحد من الوالدين إلى الطفل، وليس من الطفل إلى الوالدين أبدًا. ولكن ماذا يحدث عندما يحتاج الطفل إلى التواصل مع والديه؟

تعرف على كيفية رفع الحالة للسماح لمكون فرعي بإرسال البيانات إلى مكون أصلي.

المكونات في رد الفعل

تنظم React المكونات في تسلسل هرمي حيث تتداخل المكونات الفرعية داخل المكونات الأصلية. يشكل هذا التسلسل الهرمي اللبنات الأساسية لواجهة مستخدم التطبيق.

</ParentComponent>

يتلقى كل مكون فرعي بيانات، تُعرف بالدعائم، من المكون الأصلي. يمكن أن تحتوي عناصر React على أنواع مختلفة من البيانات مثل المصفوفات أو الكائنات أو السلاسل أو حتى الوظائف. لا يمكن للمكون التابع معالجة هذه البيانات مباشرة.

النظر في المكون التالي، ودعا زر العداد:

const CounterButton = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count + 1)
 }
return (
Increment</button>
 )
}

يحتفظ المكون بقيمة حالة مسماة عدد والذي يزداد في كل مرة ينقر فيها المستخدم على الزر.

لنفترض أنك قمت بدمج مكون CounterButton داخل مكون آخر يسمى Home:

const Home = () => {
return (

 )
}

إذا كنت تريد عرض قيمة العد من زر العداد داخل المكون الرئيسي، ستواجه تحديًا.

كما ذكرنا سابقًا، تفرض React تدفقًا أحاديًا للبيانات من الأصل إلى الابن. لذلك، لا يمكن لمكون CounterButton مشاركة قيمة حالة العد مباشرة مع المكون الرئيسي.

للالتفاف على هذا، تحتاج إلى رفع الدولة.

كيفية رفع الحالة لمشاركة البيانات بين المكونات

تشير حالة الرفع إلى نقل حالة المكون إلى أعلى شجرة المكونات، إلى المكون الأصلي. بمجرد رفع الحالة، يمكنك تمريرها إلى المكونات الفرعية كقيم دعامة.

في المثال المضاد السابق، ستحتاج إلى نقل حالة العد و HandleIncrement وظيفة للمكون الرئيسي. ستحتاج بعد ذلك إلى تمرير الدالة HandleIncrement إلى مكون CounterButton كخاصية.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (

{count}</p>
 )
}

بعد ذلك، تحتاج إلى تعديل مكون CounterButton لقبول وظيفة HandleIncrement واستدعائها عندما ينقر المستخدم على الزر.

const CounterButton = ({handleIncrement}) => {
return (
Increment</button>
 )
}

رفع الدولة يؤدي إلى مركزية البيانات ونقل المسؤولية إدارة الدولة من الطفل إلى الوالدين.

إلى جانب مساعدتك في عرض البيانات في المكون الأصلي، يمكن أن يساعدك رفع الحالة في مزامنة البيانات عبر مكونات متعددة.

لنفترض أنه كان لديك مكون رأس وتذييل متداخل داخل المكون الأصلي وأن كل مكون من هذه المكونات يعرض أيضًا العدد المشترك. لمشاركة هذه القيمة، يمكنك تمريرها إلى هذه المكونات كدعائم.

const Home = () => {
const [count, setCount] = useState(0)
const handleIncrement = () => {
 setCount(count++)
 }
return (



 )
}

ومع ذلك، عليك أن تكون حذرًا في رفع الحالة حتى لا ينتهي بك الأمر في موقف يُعرف باسم حفر الدعامة.

تحدي الحفر الدعامة

مع نمو تطبيقك، قد تجد أن المكونات المتعددة الموجودة بشكل أعمق في شجرة المكونات تحتاج إلى الوصول إلى حالة مشتركة. لجعل هذه الحالة المشتركة متاحة للمكونات المتداخلة، ستحتاج إلى تمرير الخاصيات عبر المكونات الوسيطة. هذه العملية يمكن أن تؤدي إلى الحفر الداعم.

يجعل الحفر الدعامي من الصعب تتبع كيفية تدفق البيانات ويمكن أن يؤدي إلى تعليمات برمجية يصعب صيانتها.

للتخفيف من حفر العناصر مع الاستمرار في مشاركة البيانات عبر المكونات، فكر في استخدام سياق React. يتيح لك سياق التفاعل مركزية الحالة بحيث تكون متاحة عبر التطبيق بأكمله.

مشاركة البيانات في رد الفعل باستخدام الدعائم

عندما تحتاج إلى مشاركة البيانات من مكون فرعي مع المكون الأصلي، قم برفع الحالة إلى المكون الأصلي ثم قم بتمرير الوظيفة التي تقوم بتحديث الحالة إلى المكون الفرعي كدعائم.

في الحالات التي يكون فيها المكون الفرعي متداخلاً بعمق في شجرة المكونات، استخدم أداة إدارة الحالة مثل React context أو أداة خارجية مثل React Redux لمنع حفر الدعامات.