العودة للمقالات

تحسين أداء تطبيقات React: دليل عملي لعام 2024

Majd Muhtaseb15‏/05‏/20258 دقيقة

مقدمة

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

1. التذكر (Memoization): منع إعادة العرض غير الضرورية

التذكر هو أسلوب قوي لمنع إعادة العرض غير الضرورية. توفر React أدوات مدمجة مثل React.memo و useMemo و useCallback لتحقيق ذلك.

React.memo: قم بتغليف المكونات الوظيفية التي تتلقى نفس الخصائص لمنع إعادة العرض.

import React from 'react';

const MyComponent = React.memo(({ data }) => {
  console.log("تم عرض MyComponent!");
  return <div>{data.name}</div>;
});

export default MyComponent;

useMemo: قم بتذكر الحسابات المكلفة بناءً على التبعيات.

import React, { useMemo } from 'react';

function MyComponent({ items }) {
  const expensiveCalculation = useMemo(() => {
    // قم بإجراء حسابات معقدة بناءً على 'items'
    return items.reduce((sum, item) => sum + item.value, 0);
  }, [items]);

  return <div>النتيجة: {expensiveCalculation}</div>;
}

useCallback: قم بتذكر دوال الاستدعاء لمنع إعادة عرض المكونات الفرعية غير الضرورية.

import React, { useCallback } from 'react';

function MyParentComponent({ onButtonClick }) {
  const handleClick = useCallback(() => {
    onButtonClick();
  }, [onButtonClick]);

  return <button onClick={handleClick}>اضغط هنا</button>;
}

2. التحميل الكسول (Lazy Loading): تقسيم التعليمات البرمجية لتحميل أولي أسرع

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

React.lazy و Suspense: قم باستيراد المكونات ديناميكيًا.

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

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

function MyPage() {
  return (
    <Suspense fallback={<div>جاري التحميل...</div>}>
      <MyLazyComponent />
    </Suspense>
  );
}

3. جلب البيانات بكفاءة: تقليل طلبات الشبكة

قم بتحسين جلب البيانات لتقليل عدد طلبات الشبكة وتحسين الأداء المتصور.

Debouncing/Throttling (التأخير/التحديد): حدد المعدل الذي تتم به استدعاءات API.

import { useState, useEffect } from 'react';
import { debounce } from 'lodash'; // Install lodash: npm install lodash

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  const debouncedSearch = debounce((term) => {
    console.log("تنفيذ استدعاء API بالمصطلح:", term);
    // استبدل باستدعاء API الفعلي الخاص بك
    // fetch(`/api/search?q=${term}`).then(...);
  }, 300); // تأخير 300 مللي ثانية

  useEffect(() => {
    debouncedSearch(searchTerm);

    return () => {
      debouncedSearch.cancel(); // إلغاء الدالة المؤجلة عند إلغاء التحميل
    };
  }, [searchTerm, debouncedSearch]);

  return (
    <input
      type="text"
      placeholder="ابحث..."
      onChange={(e) => setSearchTerm(e.target.value)}
    />
  );
}

4. المحاكاة الافتراضية (Virtualization): عرض القوائم الكبيرة بكفاءة

عند عرض قوائم كبيرة، تقوم تقنيات المحاكاة الافتراضية مثل react-window أو react-virtualized بعرض العناصر المرئية فقط في إطار العرض، مما يحسن أداء التمرير.

خاتمة

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