M

MLOG

العربية

استكشف تقنيات الحفظ المتقدمة في React لتحسين الأداء في التطبيقات العالمية. تعلم متى وكيف تستخدم React.memo و useCallback و useMemo لبناء واجهات مستخدم فعالة.

React Memo: نظرة معمقة على تقنيات التحسين للتطبيقات العالمية

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

ما هو React.memo؟

React.memo هو مكون عالي الرتبة (HOC) يقوم بحفظ مكون وظيفي. بعبارات أبسط، يمنع المكون من إعادة التصيير (re-rendering) إذا لم تتغير خصائصه (props). افتراضيًا، يقوم بإجراء مقارنة سطحية (shallow comparison) للخصائص. يمكن أن يؤدي ذلك إلى تحسين الأداء بشكل كبير، خاصة للمكونات التي يكون تصييرها مكلفًا حسابيًا أو التي يعاد تصييرها بشكل متكرر حتى عندما تظل خصائصها كما هي.

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

لماذا نستخدم React.memo؟

فيما يلي الفوائد الرئيسية لاستخدام React.memo:

الاستخدام الأساسي لـ React.memo

استخدام React.memo بسيط. ما عليك سوى تغليف المكون الوظيفي الخاص بك به:

import React from 'react';

const MyComponent = (props) => {
 console.log('MyComponent rendered');
 return (
 
{props.data}

 );
};

export default React.memo(MyComponent);

في هذا المثال، لن يتم إعادة تصيير MyComponent إلا إذا تغيرت خاصية data. سيساعدك الأمر console.log على التحقق من وقت إعادة تصيير المكون فعليًا.

فهم المقارنة السطحية

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

لنأخذ المثال التالي:

import React, { useState } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent rendered');
 return (
 
{props.data.name}

 );
};

const MemoizedComponent = React.memo(MyComponent);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user }); // إنشاء كائن جديد بنفس القيم
 };

 return (
 

 
 
 

 );
};

export default App;

في هذه الحالة، على الرغم من أن قيم كائن user (name و age) تظل كما هي، فإن الدالة handleClick تنشئ مرجع كائن جديد في كل مرة يتم استدعاؤها. لذلك، سيرى React.memo أن خاصية data قد تغيرت (لأن مرجع الكائن مختلف) وسيعيد تصيير MyComponent.

دالة المقارنة المخصصة

لمعالجة مشكلة المقارنة السطحية مع الكائنات والمصفوفات، يسمح لك React.memo بتوفير دالة مقارنة مخصصة كوسيط ثانٍ له. تأخذ هذه الدالة وسيطين: prevProps و nextProps. يجب أن تعيد true إذا كان يجب *عدم* إعادة تصيير المكون (أي أن الخصائص متماثلة فعليًا) و false إذا كان يجب إعادة تصييره.

إليك كيفية استخدام دالة مقارنة مخصصة في المثال السابق:

import React, { useState, memo } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent rendered');
 return (
 
{props.data.name}

 );
};

const areEqual = (prevProps, nextProps) => {
 return prevProps.data.name === nextProps.data.name && prevProps.data.age === nextProps.data.age;
};

const MemoizedComponent = memo(MyComponent, areEqual);

const App = () => {
 const [user, setUser] = useState({ name: 'John', age: 30 });

 const handleClick = () => {
 setUser({ ...user });
 };

 return (
 

 
 
 

 );
};

export default App;

في هذا المثال المحدث، تقارن دالة areEqual خاصيتي name و age لكائنات user. لن تتم إعادة تصيير MemoizedComponent الآن إلا إذا تغيرت إما name أو age.

متى نستخدم React.memo

يكون React.memo أكثر فعالية في السيناريوهات التالية:

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

بدائل لـ React.memo

بينما يُعد React.memo أداة قوية، إلا أنه ليس الخيار الوحيد لتحسين أداء مكونات React. إليك بعض البدائل والتقنيات التكميلية:

1. PureComponent

بالنسبة للمكونات من نوع الفئة (class components)، يوفر PureComponent وظائف مشابهة لـ React.memo. يقوم بإجراء مقارنة سطحية لكل من الخصائص والحالة، ولا يعيد التصيير إلا إذا كانت هناك تغييرات.

import React from 'react';

class MyComponent extends React.PureComponent {
 render() {
 console.log('MyComponent rendered');
 return (
 
{this.props.data}

 );
 }
}

export default MyComponent;

يعد PureComponent بديلاً مناسبًا لتنفيذ shouldComponentUpdate يدويًا، والتي كانت الطريقة التقليدية لمنع عمليات إعادة التصيير غير الضرورية في مكونات الفئة.

2. shouldComponentUpdate

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

import React from 'react';

class MyComponent extends React.Component {
 shouldComponentUpdate(nextProps, nextState) {
 return nextProps.data !== this.props.data;
 }

 render() {
 console.log('MyComponent rendered');
 return (
 
{this.props.data}

 );
 }
}

export default MyComponent;

على الرغم من أن shouldComponentUpdate لا تزال متاحة، إلا أنه يُفضل عمومًا استخدام PureComponent و React.memo لبساطتهما وسهولة استخدامهما.

3. useCallback

useCallback هو خطاف (Hook) في React يقوم بحفظ دالة. يعيد نسخة محفوظة من الدالة لا تتغير إلا إذا تغيرت إحدى تبعياتها. هذا مفيد بشكل خاص لتمرير دوال الاستدعاء (callbacks) كخصائص للمكونات المحفوظة.

لنأخذ المثال التالي:

import React, { useState, useCallback, memo } from 'react';

const MyComponent = (props) => {
 console.log('MyComponent rendered');
 return (
 
 );
};

const MemoizedComponent = memo(MyComponent);

const App = () => {
 const [count, setCount] = useState(0);

 const handleClick = useCallback(() => {
 setCount(count + 1);
 }, [count]);

 return (
 

 
 
Count: {count}

 

 );
};

export default App;

في هذا المثال، يضمن useCallback أن دالة handleClick لا تتغير إلا عندما تتغير حالة count. بدون useCallback، سيتم إنشاء دالة جديدة في كل عملية تصيير لـ App، مما يتسبب في إعادة تصيير MemoizedComponent بشكل غير ضروري.

4. useMemo

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

import React, { useState, useMemo } from 'react';

const App = () => {
 const [input, setInput] = useState('');

 const expensiveCalculation = (str) => {
 console.log('Calculating...');
 let result = 0;
 for (let i = 0; i < str.length * 1000000; i++) {
 result++;
 }
 return result;
 };

 const memoizedResult = useMemo(() => expensiveCalculation(input), [input]);

 return (
 

  setInput(e.target.value)} />
 
Result: {memoizedResult}

 

 );
};

export default App;

في هذا المثال، يضمن useMemo أن دالة expensiveCalculation لا يتم استدعاؤها إلا عند تغير حالة input. هذا يمنع إعادة تشغيل الحساب في كل عملية تصيير، مما يمكن أن يحسن الأداء بشكل كبير.

أمثلة عملية للتطبيقات العالمية

دعنا نتناول بعض الأمثلة العملية لكيفية تطبيق React.memo والتقنيات ذات الصلة في التطبيقات العالمية:

1. محدد اللغة

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

import React, { memo } from 'react';

const LanguageItem = ({ language, onSelect }) => {
 console.log(`LanguageItem ${language} rendered`);
 return (
 
  •  onSelect(language)}>{language}
    • 
 );
};

const MemoizedLanguageItem = memo(LanguageItem);

const LanguageSelector = ({ languages, onSelect }) => {
 return (
 
      
 {languages.map((language) => (
 
 ))}
 
    
 );
};

export default LanguageSelector;

    في هذا المثال، لن تتم إعادة تصيير MemoizedLanguageItem إلا إذا تغيرت خاصية language أو onSelect. يمكن أن يكون هذا مفيدًا بشكل خاص إذا كانت قائمة اللغات طويلة أو إذا كان معالج onSelect معقدًا.

    2. محول العملات

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

    import React, { memo } from 'react';

const CurrencyItem = ({ currency, rate, onSelect }) => {
 console.log(`CurrencyItem ${currency} rendered`);
 return (
 
  •  onSelect(currency)}>{currency} - {rate}
    • 
 );
};

const MemoizedCurrencyItem = memo(CurrencyItem);

const CurrencyConverter = ({ currencies, onSelect }) => {
 return (
 
      
 {Object.entries(currencies).map(([currency, rate]) => (
 
 ))}
 
    
 );
};

export default CurrencyConverter;

    في هذا المثال، لن تتم إعادة تصيير MemoizedCurrencyItem إلا إذا تغيرت خاصية currency أو rate أو onSelect. يمكن أن يحسن هذا الأداء إذا كانت قائمة العملات طويلة أو إذا كانت تحديثات أسعار الصرف متكررة.

    3. عرض الملف الشخصي للمستخدم

    يتضمن عرض الملف الشخصي للمستخدم إظهار معلومات ثابتة مثل الاسم وصورة الملف الشخصي، وربما سيرة ذاتية. يضمن استخدام `React.memo` أن المكون لا يعاد تصييره إلا عندما تتغير بيانات المستخدم فعليًا، وليس عند كل تحديث للمكون الأصل.

    import React, { memo } from 'react';

const UserProfile = ({ user }) => {
 console.log('UserProfile rendered');
 return (
 
    
 
    {user.name}
    
 Profile
 
    {user.bio}
    
 
    
 );
};

export default memo(UserProfile);

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

    الأخطاء الشائعة وكيفية تجنبها

    بينما يُعد React.memo أداة تحسين قيّمة، فمن المهم أن تكون على دراية بالأخطاء الشائعة وكيفية تجنبها:

    تحليل أداء تطبيقك

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

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

    من خلال تحليل أداء تطبيقك، يمكنك تحديد المكونات التي ستستفيد أكثر من الحفظ والتأكد من أن React.memo يحسن الأداء بالفعل.

    الخاتمة

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

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

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

    قراءات ومصادر إضافية