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

المثيلات المستقلة: احتفظ بالحالة داخل المكون

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

function Counter() {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
}

// Usage
 // Instance 1
 // Instance 2

هنا، يقوم كل مكون من مكونات العداد بتتبع العدد الخاص به. لذا، إذا نقرت على الزر في أحد العدادات، فلن يغير العدد في العداد الآخر.

المثيلات التابعة: إدارة الحالة في المكون الأصلي

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

function Parent() {
  const [sharedCount, setSharedCount] = useState(0);

  return (
    

      
Total Count: {sharedCount}
      
  );
}

function Counter({ count, setCount }) {
  return (
    

      
Count: {count}
       setCount(count   1)}>Increment
    
  );
}

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

أمثلة من مشاريعي

لقد اكتشفت ذلك أثناء بناء مكون الأكورديون. فيما يلي مثالان من عملي:

• مثيلات الأكورديون المستقلة: مثال. في هذا الإعداد، يعمل كل مثيل للأكورديون بشكل مستقل.

• مثيلات الأكورديون التابعة: مثال. في هذا الإصدار، تعتمد جميع مثيلات الأكورديون على بعضها البعض وتظل متزامنة.

ملخص سريع

• إذا كانت المكونات تعمل بشكل منفصل، فاحتفظ بالحالة داخل كل مكون.

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

أحدث هذا النهج فرقًا كبيرًا بالنسبة لي عند إنشاء أمثلة الأكورديون هذه. نأمل أن يساعدك أيضًا!