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

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

مقدمة: لماذا يهم الأداء في تطبيقات React الحديثة

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

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

الحفظ في رد الفعل

كيفية استخدام React.memo واستخدام Memo بشكل فعال

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

رد فعل.مذكرة

لنبدأ بـ React.memo. يمنع هذا المكون ذو الترتيب الأعلى المكون من إعادة العرض إذا لم تتغير خصائصه.

مثال:

const MyComponent = React.memo(function MyComponent({ name }) {
  console.log('Rendered');
  return 
Hello, {name}
;
});

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

useMemo

بعد ذلك، هناك useMemo. يُستخدم هذا الخطاف لحفظ العمليات الحسابية أو القيم باهظة الثمن داخل مكوناتك الوظيفية.

مثال:

import { useMemo } from 'react';

function MyApp({ items }) {
  const expensiveCalculation = useMemo(() => {
    return items.reduce((total, item) => total   item.value, 0);
  }, [items]);

  return 
Total Value: {expensiveCalculation}
;
}

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

مكونات التحميل كسول

تحسين أوقات التحميل باستخدام React.lazy

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

توفر React وظيفة مدمجة تسمى React.lazy() تسمح لك بتحميل المكونات حسب الطلب.

مثال:

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...}>
      
    
  );
}

في هذا المثال، لن يتم تحميل MyComponent إلا عند الحاجة إليه بالفعل. يوفر مكون Suspense واجهة مستخدم احتياطية (مثل أداة التحميل الدوارة) أثناء جلب المكون، مما يجعل تجربة المستخدم أكثر سلاسة.

رد فعل منشئ ملفات التعريف لمراقبة الأداء

كيفية التعرف على الاختناقات

من الصعب تحسين شيء لا يمكنك قياسه. وهنا يأتي دور React Profiler. يسمح لك React Profiler بتتبع أداء مكوناتك، وتحديد عمليات العرض البطيئة، وقياس "تكلفة" عمليات إعادة العرض.

لاستخدام React Profiler، ما عليك سوى لف شجرة المكونات باستخدام وتوفير وظيفة رد اتصال لجمع بيانات الأداء.

مثال:

import { Profiler } from 'react';

function onRenderCallback(
  id, // the "id" prop of the Profiler tree that has just committed
  phase, // either "mount" (if the tree just mounted) or "update" (if it re-rendered)
  actualDuration, // time spent rendering the committed update
  baseDuration, // estimated time to render the entire subtree without memoization
  startTime, // when React began rendering this update
  commitTime, // when React committed this update
  interactions // the Set of interactions belonging to this update
) {
  console.log({ id, phase, actualDuration });
}

function MyApp() {
  return (
    
      
    
  );
}

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

استراتيجيات التحسين الأخرى

تقسيم التعليمات البرمجية وتحسين التعامل مع الأحداث والمزيد

بعيدًا عن الحفظ والتحميل البطيء، هناك العديد من التقنيات الأخرى لتحسين أداء تطبيق React الخاص بك:

1. تقسيم الكود: قم بتقسيم تطبيقك إلى أجزاء أصغر يمكن تحميلها عند الطلب باستخدام ميزة تقسيم الكود في Webpack. وهذا يقلل من حجم الحزمة الأولية.

   const OtherComponent = lazy(() => import('./OtherComponent'));

1. تحسين التعامل مع الأحداث: استخدم خطاف useCallback لحفظ معالجات الأحداث، مما يمنع إعادة إنشائها في كل عرض.

   const handleClick = useCallback(() => {
     console.log('Clicked');
   }, []);

1. Debouncing and Throttling: قم بتحسين مستمعي الأحداث مثل التمرير أو تغيير الحجم عن طريق debouncing أو خنقهم للحد من تكرار التحديثات.

   const handleScroll = debounce(() => {
     console.log('Scroll event');
   }, 300);

الخلاصة: بناء تطبيقات تفاعلية عالية الأداء باستخدام هذه التقنيات

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

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

هل أنت على استعداد للارتقاء بأداء تطبيق React إلى المستوى التالي؟ جرّب تقنيات التحسين هذه في مشاريعك وشاهد سرعة تطبيقك تتحسن!

إذا استمتعت بهذا المقال، فكر في دعم عملي:

• اشتري لي قهوة
• حجز مكالمة للحصول على الإرشاد أو المشورة المهنية
• تابعوني على تويتر
• التواصل على LinkedIn