لماذا يعد استخدام وظائف السهم أو الربط في دعائم JSX أمرًا محظورًا

عند استخدام React، من المهم تجنب استخدام وظائف الأسهم أو ملزمة في الدعائم JSX. يمكن أن تؤدي هذه الممارسة إلى مشاكل في الأداء وسلوك غير صحيح.

مشاكل الأداء

استخدام وظائف الأسهم أو الربط ضمن دعائم JSX يفرض إعادة إنشاء هذه الوظائف في كل تصيير. هذا يعني أنه:

• تم تجاهل الوظيفة القديمة، مما يؤدي إلى جمع البيانات المهملة.
• قد يؤدي العرض المستمر للعديد من العناصر إلى اهتزاز الأداء.
• المكونات التي تعتمد على PureComponents أو يجب أن يستمر ComponentUpdate في تشغيل عمليات إعادة العرض بسبب تغيير وظيفة وظيفة السهم.

خذ بعين الاعتبار المثال التالي:

onClick={ () => this.handleDelete(tile)}

onClick={() => this.handleDelete(tile)}

لتجنب هذه المخاطر، استخدم أفضل الممارسات التالية:

ربط معالج الحدث في المنشئ:
constructor(props) { سوبر(الدعائم); this.handleDelete = this.handleDelete.bind(this);

constructor(props) {
  super(props);
  this.handleDelete = this.handleDelete.bind(this);
}

قم بإنشاء وظيفة سهم خارج طريقة العرض:
const HandleDelete = Tile => { // التعامل مع منطق الحذف };

const handleDelete = tile => {
  // Handle delete logic
};

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