آه، الرد! مكتبتنا المحبوبة لبناء واجهات المستخدم. إنها الجرعة السحرية التي تجعل تطبيقات الويب الخاصة بنا تبدو تفاعلية وسريعة - حتى يوم واحد، لا يحدث ذلك. وفجأة، لاحظت أن الأمور تتباطأ. يبدو النقر فوق الزر وكأنه يرسل رسالة بواسطة الحمام الزاجل. يتحول تطبيقك من تطبيق سريع للغاية إلى تطبيق بطيء أثناء استراحة القهوة، ويبدأ المستخدمون في إعطائك "المظهر".

ولكن لا تقلق! مثلما يمكن للقهوة أن تحل معظم مشكلات الحياة (أو هكذا نود أن نعتقد)، يمكن لبعض التقنيات الأساسية أن تحفز تطبيق React الخاص بك وتعيده إلى السرعة القصوى. دعنا نستكشف 6 طرق بسيطة لتحسين تطبيق React الخاص بك، بحيث يكون أسرع من زيادة الكافيين اليومية.

1. تقسيم التعليمات البرمجية: تحميل ما تحتاجه فقط

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

يعد استخدام React.lazy() وSuspense طريقة مثالية لتنفيذ ذلك:

import React, { Suspense } from 'react';

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

const App = () => {
  return (
    Loading...}>
      
    
  );
}

لماذا يساعد: يؤدي تقسيم التعليمات البرمجية إلى تقليل وقت التحميل الأولي لتطبيقك عن طريق تأجيل تحميل التعليمات البرمجية غير المستخدمة لحين الضرورة. لن يضطر المستخدمون إلى الانتظار حتى يتم تحميل التطبيق بالكامل قبل رؤية شيء ما على الشاشة.

2. التحميل البطيء للصور: لا تقم بتحميل جميع الوجبات الخفيفة مرة واحدة

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

يعد استخدام مكتبة مثل React-lazyload حلاً سريعًا:

import LazyLoad from 'react-lazyload';


  

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

3. useCallback وuseMemo: تعزيز الذاكرة لـ React

تمامًا مثل الطريقة التي تستمر بها في إعادة استخدام كوب القهوة نفسه لتوفير الوقت في الغسيل، يمكن لـ React إعادة استخدام القيم والوظائف إذا سمحت بذلك! useCallback وuseMemo عبارة عن خطافات تساعدك على تخزين حسابات أو وظائف باهظة الثمن، لذلك لا تتم إعادة حسابها في كل عرض.

مثال مذكرة الاستخدام:

const expensiveCalculation = (num) => {
  return num ** 2;
};

const MyComponent = ({ num }) => {
  const squaredNumber = React.useMemo(() => expensiveCalculation(num), [num]);

  return 
{squaredNumber}
;
}

استخدام مثال رد الاتصال:

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

لماذا يساعد: مع useMemo، لن تضطر React إلى إعادة العمليات الحسابية باهظة الثمن دون داع. ويمنعك useCallback من إنشاء دالة جديدة في كل عرض. يؤدي هذا إلى إبقاء React يعمل بسلاسة، مثل ترقية ذاكرة الوصول العشوائي الخاصة به!

4. التذكير باستخدام React.memo: إيقاف عمليات إعادة العرض غير الضرورية

هل لديك ذلك الصديق الذي يكرر نفس القصة مرارًا وتكرارًا؟ يمكن أن تكون React كذلك أيضًا — إعادة عرض المكونات حتى عندما لا تكون هناك حاجة لذلك! هنا يأتي دور React.memo، الذي يمنع React من إعادة تصيير المكونات ما لم تتغير خصائصها.

const MyComponent = React.memo(({ value }) => {
  return 
{value}
;
});

لماذا يساعد: React.memo يشبه إخبار React، "مرحبًا، لقد سمعت هذا من قبل! فلا تكرر كلامك إلا إذا كان هناك شيء جديد." إنه يتجنب عمليات إعادة العرض غير الضرورية، مما يوفر الوقت والموارد.

5. إدارة الحالة بكفاءة: رفعها فقط عند الحاجة

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

const ParentComponent = () => {
  const [sharedState, setSharedState] = useState(false);

  return (
    
      
      
    >
  );
}

const ChildComponent = ({ sharedState }) => {
  return 
{sharedState ? 'Active' : 'Inactive'}
;
}

const AnotherChild = ({ setSharedState }) => {
  return  setSharedState(true)}>Activate;
}

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

6. رفض مدخلات المستخدم: اهدأ، قم بالرد!

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

استخدام lodash.debounce يمكن أن يحل هذه المشكلة:

import _ from 'lodash';

const Search = () => {
  const [query, setQuery] = useState('');

  const debouncedSearch = _.debounce((input) => {
    // Do your search logic
    console.log(input);
  }, 500);

  const handleChange = (e) => {
    setQuery(e?.target?.value);
    debouncedSearch(e?.target?.value);
  };

  return ;
}

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

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

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

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

تواصل معي

الموقع الإلكتروني: هارديك جوهيل

جيثب: https://github.com/HardikGohilHLR

لينكد إن: https://www.linkedin.com/in/hardikgohilhlr

شكرًا ❤️