متى يتم استخدام setState الوظيفية

توفر وظيفة setState في React صيغتين لتحديث حالة المكون: صيغة المهمة المباشرة وصياغة المحدث الوظيفي.

صيغة التعيين المباشر:

this.setState({pictures: pics})

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

صيغة المحدث الوظيفي:

this.setState(prevState => ({
  pictures: prevState.pictures.concat(pics)
}))

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

الدمج والتجميع

يدمج React داخليًا استدعاءات setState المتعددة في تحديث واحد. يكون بناء جملة التعيين المباشر عرضة لمشاكل الدمج عندما تحاول عدة مكالمات تحديث نفس مفتاح الحالة. على سبيل المثال:

this.setState({pictures: this.state.pictures.concat(pics1)})
this.setState({pictures: this.state.pictures.concat(pics2)})

يقوم بناء جملة المحدث الوظيفي تلقائيًا بدمج التحديثات بشكل صحيح، مما يؤدي إلى أن الحالة النهائية تعكس كلاً من pics1 وpics2.

الأداء والكفاءة

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

بينما يمكن استخدام كلا الصيغتين لتحديث الحالة، فإن صيغة المحدث الوظيفي هي يوصى به عمومًا نظرًا لاتساقه وسلامته وإمكانيات الدمج ودعمه لتحسين الأداء. باستخدام صيغة المُحدِّث الوظيفي، يمكن للمطورين تجنب مشكلات تغيير الحالة والتأكد من تحديث مكوناتهم بشكل صحيح وفعال.