تجنب وظائف الأسهم وربط دعائم JSX للحصول على الأداء الأمثل

تهدف أداة الوبر الخاصة بـ React إلى تحسين ممارسات التعليمات البرمجية من خلال تسليط الضوء على المشكلات المحتملة. إحدى رسائل الخطأ الشائعة هي "يجب ألا تستخدم عناصر JSX وظائف الأسهم." يشير هذا إلى التأثيرات الضارة لاستخدام وظائف الأسهم أو الارتباط ضمن دعائم JSX.

لماذا وظائف السهم وربط الأداء

دمج وظائف السهم أو الارتباط في دعائم JSX له تأثير ضار. الآثار المترتبة على الأداء:

• مجموعة البيانات المهملة: في كل مرة يتم إنشاء وظيفة سهم، يتم إنشاء الوظيفة السابقة تم التخلص منها. إذا تم عرض عناصر متعددة باستخدام وظائف مضمنة، فيمكن أن يؤدي ذلك إلى رسوم متحركة متقطعة.
• إعادة العرض: تتداخل وظائف السهم المضمنة مع آليات المقارنة السطحية التي تستخدمها PureComponents والمكونات التي تستخدم طريقة mustComponentUpdate. نظرًا لإعادة إنشاء خاصية دالة السهم في كل مرة، يتم اكتشافها على أنها تغيير في الخاصية، مما يؤدي إلى إعادة عرض غير ضرورية.

تأثير المعالجات المضمنة على إعادة العرض

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

المثال 1: PureComponent بدون Inline معالج

class Button extends React.PureComponent {
  render() {
    const { onClick } = this.props;
    console.log('render button');
    return Click;
  }
}

في هذا الكود، يُعاد عرض مكون الزر فقط عندما تتغير دعائمه، كما هو متوقع بالنسبة لـ PureComponent.

مثال 2: PureComponent مع معالج مضمن

const Button = (props) => {
  console.log('render button');
  return  props.onClick()}>Click;
};

نظرًا لوظيفة السهم المضمنة، يُعاد عرض الزر الآن في كل مرة، على الرغم من بقاء حالة المكون دون تغيير. يمكن أن تؤثر عملية إعادة العرض غير الضرورية هذه بشكل كبير على الأداء.

أفضل الممارسات

لتجنب مشكلات الأداء هذه، يوصى بالالتزام بأفضل الممارسات التالية:

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