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

---

1. مذكرات مع usememo و Usecallback :

المشكلة: غير ضرورية من أعمدة غير ضرورية بسبب الدعائم غير المتغيرة أو الحالة.

الحل: ذاكرة التخزين المؤقت العمليات باهظة الثمن ومراجع الوظائف.

const ExpensiveComponent = ({ items }) => {
  const sortedList = useMemo(() => items.sort((a, b) => a.price - b.price), [items]);
  const handleClick = useCallback(() => {
    console.log('Item clicked:', sortedList[0]);
  }, [sortedList]);
  return ;
};

أفضل الممارسات: استخدم مع React.memo للحصول على مكونات الطفل لمنع تحديثات الشجرة الفرعية غير الضرورية. مثالية للحسابات المعقدة (الفرز ، التصفية) ، تم تمرير عمليات الاسترجاعات إلى الأطفال المحسنين ، وقيم موفر سياق مستقر.

---

2. تحميل كسول وتقسيم الكود:

المشكلة: حجم حزمة أولي كبير يؤثر على الطلاء الأول للمحتوى (FCP).

الحل: استيرادات ديناميكية و التشويق للتحميل عند الرسم.

const HeavyChartLibrary = React.lazy(() => import('./ChartComponent'));

const Dashboard = () => (
  }>
    {showCharts && }
  
);

متقدم: الاندماج مع جهاز توجيه React لتقسيم الكود المستند إلى الطريق.

---

3. قوائم افتراضية لمجموعات البيانات الكبيرة:

المشكلة: جعل آلاف العناصر يطغى على DOM.

الحل: React-window

import { FixedSizeList } from 'react-window';

const BigList = ({ items }) => (
  
    {({ index, style }) => (
      
...
    )}
  
);

المكافأة: استخدم المتغيرات للحصول على ارتفاعات الصف الديناميكي و

---

إدارة الحالة الفعالة:

المشكلة:

تحديثات الحالة المتعددة التي تسبب متتالية إعادة الترتيب.

الحل:

الاستفادة من ردود الفعل التلقائي 18.

رد فعل 18:

setCount (1) ؛ setText ('تحديث') ؛ // re-Render Single

setCount(1);
setText('Updated'); // Single re-render

استخدم

usereducer لتحديثات الحالة الذرية.

---

مكالمات Debouncing API:

المشكلة:

طلبات API المفرطة من إدخال المستخدم السريع (على سبيل المثال ، أشرطة البحث).

الحل:

A Custom

المستخدمة hook. استيراد {UseEffect ، Usestate} من 'React' ؛ const usebouncedValue = (القيمة ، التأخير) => { const [debouncedValue ، setDebouncedValue] = Usestate (value) ؛ useEffect (() => { const handler = setTimeOut (() => setDebouncedValue (القيمة) ، التأخير) ؛ return () => clearTimeOut (معالج) ؛ } ، [القيمة ، التأخير]) ؛ إرجاع debouncedvalue ؛ } ؛

import { useEffect, useState } from 'react';

const useDebouncedValue = (value, delay) => {
  const [debouncedValue, setDebouncedValue] = useState(value);
  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);
  return debouncedValue;
};

الجمع مع

AbortController لإلغاء الطلبات المعلقة.

---

API Optized Context API:

المشكلة:

غير ضرورية من مستهلكي السياق بسبب التغييرات غير المرتبطة.

الحل:

تقسيم السياقات وقيم مزود المذكرات.

---

تحديثات واجهة المستخدم المتفائلة:

المشكلة:

بطيئة واجهة المستخدم بسبب انتظار ردود API.

الحل:

توفير ملاحظات مرئية فورية وتراجع عن الخطأ.

قائمة مراجعة الأداء:

---

ملف التعريف إعادة تدوير مع REACT DEVTOOLS PROFILER.

تحليل حجم الحزمة باستخدام Source-Map-Explorer.
اختبار مع علامة التبويب أداء Chrome (خنق وحدة المعالجة المركزية).
استخدم
3. React.memo
،
4. usememo ، usecallback استراتيجية. تنفيذ التحميل الإضافي. تحسين الصور/الوسائط مع التحميل كسول.
5. النظر في عرض جانب الخادم للمحتوى الحرج.
7. تذكر:
ملف تعريف أولاً ، قم بتحسين ثانية! تنطبق هذه التقنيات عبر أطراف React المختلفة (next.js ، gatsby ، إلخ.).