استراتيجية إدارة الدولة المختلفة.

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

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

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

على سبيل المثال، إذا كان لديك تسلسل هرمي للمكونات مثل هذا:

ParentComponent
  ├── IntermediateComponent1
  │     └── IntermediateComponent2
  │           └── TargetComponent

إذا كان لدى ParentComponent بعض البيانات التي يحتاجها TargetComponent، فإن حفر الدعامات يتضمن تمرير تلك البيانات من ParentComponent عبر IntermediateComponent1 وIntermediateComponent2 قبل أن تصل أخيرًا إلى TargetComponent. يتلقى كل مكون وسيط البيانات كدعائم ويمررها إلى المستوى التالي.

function App() {

  const [user, setUser] = useState({ name: "John Doe" });

return (

    


      

    


  );

}

function ParentComponent({ user }) {

  return (

    


      

    


  );

}

function Child({ user }) {

  return (

    


      

    


  );

}

function Grandchild({ user }) {

  return 
Hello, {user.name}!
;

}

حفر الدعامة: جيد أم سيئ؟

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

• المشروع الصغير: بالنسبة للمشروعات الصغيرة التي تعد في الأساس مواقع ويب أساسية، مثل المحفظة، وصفحة المنتج الأساسية، من الجيد استخدام الحفر الدعامي. ليس هناك أي فائدة من إعداد أداة إدارة الحالة بأكملها مثل mobx أو Redux لمثل هذه التطبيقات.

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

استخدام حفر الدعامة في React.

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

2. *تدفق البيانات الصريح
   * تتمثل إحدى الفوائد الرئيسية لحفر الدعامات في الحفاظ على تدفق واضح وصريح للبيانات داخل التطبيق. من خلال تمرير الخاصيات عبر كل مكون، يكون من الواضح دائمًا مصدر البيانات وكيفية تمريرها، مما يمكن أن يبسط تصحيح الأخطاء وفهم الكود.

3. *البساطة في التطبيقات الصغيرة
   * في التطبيقات الأصغر حجمًا أو عندما يكون التسلسل الهرمي للمكونات سطحيًا نسبيًا، يعد حفر الدعامات حلاً مباشرًا لا يتطلب أدوات أو مكتبات إضافية. فهو يسمح للمطورين بإدارة الحالة وتمرير البيانات دون إدخال أي تعقيد.

بديل لدعم الحفر في React.

1. واجهة برمجة تطبيقات سياق التفاعل

• ما هي: ميزة مضمنة في React تسمح لك بمشاركة البيانات عبر شجرة المكونات دون الحاجة إلى تمرير الدعائم يدويًا على كل مستوى.

• متى يتم الاستخدام: مناسب لمشاركة البيانات العالمية مثل السمات أو حالة مصادقة المستخدم أو الإعدادات المحلية.

• يمكنك استخدام واجهة برمجة تطبيقات السياق لتجنب تمرير الدعائم عبر كل مستوى من مستويات شجرة المكونات. يتيح لك السياق إنشاء حالة عامة يمكن الوصول إليها بواسطة أي مكون، متجاوزًا الحاجة إلى تمرير الخاصيات يدويًا عبر كل مستوى.

الايجابيات:

• يقلل من الحاجة إلى الحفر الدعامي.

• يبسط مشاركة البيانات عبر مكونات متعددة.

السلبيات:

• يمكن تقديم تبعيات مخفية، مما يجعل المكونات أقل قابلية لإعادة الاستخدام.

• الإفراط في الاستخدام يمكن أن يجعل تصحيح الأخطاء أكثر تعقيدًا.

2. مكتبات إدارة الدولة (على سبيل المثال، Redux، MobX)

• ما هي: المكتبات الخارجية التي توفر طريقة منظمة لإدارة ومشاركة حالة التطبيق.

• متى يتم الاستخدام: مثالي للتطبيقات واسعة النطاق حيث تكون إدارة الحالة معقدة وتتطلب بنية يمكن التنبؤ بها.

الايجابيات:

• مركزية إدارة الدولة.

• يسهل التصحيح والاختبار.

• يدعم تصحيح أخطاء السفر عبر الزمن والميزات المتقدمة الأخرى.

السلبيات:

• يضيف المزيد من التعقيد ومنحنى التعلم.

• قد يكون الأمر مبالغًا فيه بالنسبة للتطبيقات البسيطة.

3. خطافات مخصصة

• ما هي: وظائف قابلة لإعادة الاستخدام في React والتي تحتوي على منطق الحالة، مما يسمح لك بمشاركة المنطق بين المكونات بسهولة.

• متى يتم الاستخدام: مفيد لمشاركة المنطق والسلوك ذو الحالة دون حفر الدعامة.

الايجابيات:

• يعزز إعادة استخدام التعليمات البرمجية والنظافة.

• يبقي المكونات موجزة ومركزة.

السلبيات:

• قد لا يكون مناسبًا لجميع سيناريوهات مشاركة البيانات.

• يتطلب فهم واجهة برمجة تطبيقات React Hooks.

4. التركيب والمكونات ذات الترتيب العالي

• ما هي: الأنماط التي تسمح لك بتحسين المكونات عن طريق تغليفها بوظائف إضافية.

• متى يتم الاستخدام: مفيد لحقن الدعائم والسلوك في المكونات دون تعديل بنيتها.

الايجابيات:

• يشجع التعليمات البرمجية القابلة لإعادة الاستخدام والقابلة للتركيب.

• يمكن القضاء على بعض حالات الحفر الدعامي.

السلبيات:

• يمكن أن تجعل شجرة المكونات أكثر تعقيدًا.

• قد يكون من الصعب تتبع تدفق البيانات مقارنة بتمرير الدعامة الصريحة.

عيوب الدعائم الحفر في React

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

2. الصيانة: مع نمو تطبيقك، تصبح إدارة هذه التعليمات البرمجية وإعادة هيكلتها أمرًا صعبًا. يمكن أن يصبح تغيير بنية الدعامة أمرًا مرهقًا في حالة استخدام العديد من المكونات.

3. الأداء: يمكن أن تحدث عمليات إعادة عرض غير ضرورية إذا تغيرت الدعائم على مستوى أعلى وتم تمريرها إلى طبقات متعددة، حتى لو كان المكون المتداخل بعمق فقط هو الذي يحتاج إلى البيانات.

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

5. الدعائم الزائدة: تضطر المكونات الوسيطة إلى تلقي وتمرير الدعائم التي لا تستخدمها، مما يؤدي إلى اقتران غير ضروري وارتباك محتمل.

6. صعوبة الصيانة: يمكن أن يصبح تحديث المكونات أو إعادة هيكلتها عرضة للخطأ لأن التغييرات في بنية البيانات قد تتطلب تحديثات عبر طبقات متعددة من المكونات.

الأفكار النهائية

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

تتضمن التحديات انخفاض إمكانية قراءة التعليمات البرمجية وصعوبات الصيانة ومشكلات الأداء بسبب عمليات إعادة العرض غير الضرورية. للتغلب على هذه القيود، يتم اقتراح بدائل مثل React context API ومكتبات إدارة الحالة (على سبيل المثال، Redux وMobX) والخطافات المخصصة، على الرغم من أنها تأتي مع تعقيداتها الخاصة.

في جوهر الأمر، على الرغم من أن حفر الدعامات مفيد في سيناريوهات معينة، فمن المهم التفكير في حلول أكثر قابلية للتطوير مع نمو مشروعك.

عن المؤلف

Apoorv هو مطور برامج متمرس. يمكنك الاتصال على **الشبكات الاجتماعية.
اشترك في النشرة الإخبارية لـ Apoorv للحصول على أحدث المحتوى المنسق.