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

1. حفظ المكونات باستخدام React.memo

يساعدك الحفظ على تخطي عمليات إعادة العرض عندما لا تتغير دعائم المكون. ومع ذلك، من السهل إساءة استخدام React.memo من خلال عدم تنفيذ وظيفة مقارنة مخصصة.

استخدام غير صحيح:

const MemoizedComponent = React.memo(MyComponent);

يتحقق هذا فقط مما إذا كان مرجع الدعائم قد تغير، وهو ما قد لا يكون كافيًا دائمًا.

الاستخدام الصحيح:

const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  return prevProps.itemId === nextProps.itemId;
});

هنا، نستخدم وظيفة مقارنة مخصصة لا تؤدي إلا إلى إعادة العرض عندما تتغير خاصية itemId.

2. تجنب الاستخدام المفرط للوظائف المضمنة

يمكن أن يؤدي استخدام الدوال المضمنة داخل JSX إلى عمليات إعادة تصيير غير ضرورية حيث تتعامل React مع دالة جديدة كخاصية جديدة في كل تصيير.

استخدام غير صحيح:

function ButtonComponent() {
  return  handleClick()}>Click me;
}

يتسبب هذا في إعادة إنشاء HandleClick في كل عرض، مما يؤدي إلى عمليات إعادة عرض غير ضرورية.

الاستخدام الصحيح:

import { useCallback } from 'react';

function ButtonComponent() {
  const handleClick = useCallback(() => {
    // Handle click logic
  }, []);

  return Click me;
}

باستخدام useCallback، نقوم بحفظ وظيفة HandleClick، مما يمنع إعادة الإنشاء غير الضرورية في كل عرض.

3. الاستفادة من PureComponent

عند العمل مع مكونات الفئة، فإن استخدام React.PureComponent يضمن إعادة تصيير المكون فقط إذا تغيرت دعائمه أو حالته. إذا كنت تستخدم React.Component، فقد يؤدي ذلك إلى عمليات إعادة تصيير غير ضرورية.

استخدام غير صحيح:

class CardComponent extends React.Component {
  // Component logic
}

الاستخدام الصحيح:

class CardComponent extends React.PureComponent {
  // Component logic
}

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

4. تحسين محدد الاستخدام في المكونات الوظيفية

عند استخدام useSelector من React-Redux، من المهم تحديد الشريحة الضرورية فقط من الحالة.

استخدام غير صحيح:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const globalState = useSelector((state) => state);
  // Render logic
};

سيؤدي هذا إلى إعادة عرض المكون كلما تغير أي جزء من الحالة.

الاستخدام الصحيح:

import { useSelector } from 'react-redux';

const DataComponent = () => {
  const selectedData = useSelector((state) => state.specificSlice);
  // Render logic based on specific slice
};

من خلال تحديد الجزء الضروري فقط من الحالة، يمكنك تقليل عمليات إعادة العرض.

5. تنفيذ يجب تحديث المكونات في مكونات الفئة

بالنسبة لمكونات الفئة التي لا تعمل على توسيع PureComponent، فإن التنفيذ اليدوي لـ mustComponentUpdate يسمح بمزيد من التحكم الدقيق في وقت إعادة عرض المكون.

استخدام غير صحيح:

class ListItem extends React.Component {
  // Component logic
}

سيتم إعادة العرض في كل مرة يتم فيها عرض المكون الأصلي، حتى لو لم تتغير الدعائم والحالة.

الاستخدام الصحيح:

class ListItem extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return this.props.itemId !== nextProps.itemId || this.state.value !== nextState.value;
  }

  // Component logic
}

من خلال تخصيص mustComponentUpdate، نضمن أن المكون لا يُعاد عرضه إلا عندما تتغير خاصية itemId أو حالة القيمة.

خاتمة

من خلال استخدام هذه التقنيات، يمكنك تقليل عمليات إعادة العرض غير الضرورية بشكل كبير في تطبيقات React، مما يؤدي إلى أداء أفضل. يعد تنفيذ الحفظ باستخدام React.memo، والاستفادة من PureComponent، والضبط الدقيق لـ mustComponentUpdate من الاستراتيجيات الأساسية لتحسين مكونات React لديك.

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

مراجع:

1. المهوسون للمهوسون. (2023). ما هو الحفظ في رد الفعل؟
2. المزامنة. (2024). الحفظ في رد الفعل
3. الخط البياني. (2024). ما هي مذكرة React وكيفية استخدامها؟
4. Refine.dev. (2024). رد فعل دليل المذكرة مع الأمثلة

إذا وجدت هذا الدليل مفيدًا، فيرجى التفكير في مشاركته مع الآخرين! ?

توفر هذه المدونة نظرة عامة محدثة وشاملة لتجنب عمليات إعادة العرض غير الضرورية في تطبيقات React مع دمج أفضل الممارسات وتغيير أسماء المتغيرات من أجل الوضوح والملاءمة في ممارسات تطوير الويب الحديثة.

الاقتباسات:
[1] https://www.geeksforgeeks.org/what-is-memoization-in-react/
[2] https://stackoverflow.com/questions/74013864/why-arent-all-react-components-wrapped-with-react-memo-by-default
[3] https://www.syncfusion.com/blogs/post/what-is-memoization-in-react
[4] https://hygraph.com/blog/react-memo
[5] https://refine.dev/blog/react-memo-guide/
[6] https://dmitripavlutin.com/use-react-memo-wisely/
[7] https://www.topcoder.com/thrive/articles/memoization-in-react-js
[8] https://react.dev/reference/react/memo