React memo: إتقان تخزين المكونات وتحسين التصيير

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

ما هو تخزين المكونات (Component Memoization)؟

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

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

التعريف بـ React.memo

React.memo هو مكون عالي الرتبة (HOC) يوفره React لتخزين مكون وظيفي. يخبر React بشكل أساسي أن "يتذكر" مخرجات المكون لمجموعة معينة من الخصائص وأن يعيد تصيير المكون فقط إذا تغيرت الخصائص بالفعل.

كيف يعمل React.memo

يقوم React.memo بمقارنة سطحية للخصائص الحالية بالخصائص السابقة. إذا كانت الخصائص متماثلة (أو إذا أعادت دالة مقارنة مخصصة القيمة true)، يتخطى React.memo إعادة تصيير المكون. وإلا، فإنه يعيد تصيير المكون كالمعتاد.

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

لاستخدام React.memo، ببساطة قم بتغليف مكونك الوظيفي به:

            import React from 'react';

const MyComponent = (props) => {
  // Component logic
  return (
    <div>
      {props.data}
    </div>
  );
};

export default React.memo(MyComponent);

            

              
                Copy
              
            
          

في هذا المثال، لن يتم إعادة تصيير MyComponent إلا إذا تغيرت خاصية data. إذا بقيت خاصية data كما هي، فسيمنع React.memo المكون من إعادة التصيير.

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

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

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

مثال: عيوب المقارنة السطحية

            import React, { useState } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data.name}</div>;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // This will cause MyComponent to re-render every time
    // because a new object is created on each click.
    setData({ ...data });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

في هذا المثال، على الرغم من أن خاصية name في كائن data لا تتغير، سيظل MyComponent يعاد تصييره في كل مرة يتم فيها النقر على الزر. هذا لأن كائنًا جديدًا يتم إنشاؤه باستخدام عامل النشر ({ ...data }) عند كل نقرة، مما يؤدي إلى مرجع مختلف.

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

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

الصيغة

            React.memo(MyComponent, (prevProps, nextProps) => {
  // Custom comparison logic
  return true; // Return true to prevent re-render, false to allow re-render
});

            

              
                Copy
              
            
          

مثال: استخدام دالة مقارنة مخصصة

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

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data.name}</div>;
}, (prevProps, nextProps) => {
  // Only re-render if the name property changes
  return prevProps.data.name === nextProps.data.name;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // This will only cause MyComponent to re-render if the name changes
    setData({ ...data, age: data.age + 1 });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

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

متى يجب استخدام React.memo

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

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

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

تجنب استخدام React.memo في السيناريوهات التالية:

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

دمج React.memo مع تقنيات التحسين الأخرى

غالبًا ما يُستخدم React.memo جنبًا إلى جنب مع تقنيات تحسين React الأخرى لتحقيق أقصى مكاسب في الأداء.

useCallback

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

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

مثال: استخدام useCallback مع React.memo

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

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <button onClick={props.onClick}>Click Me</button>;
});

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

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

  return (
    <div>
      <MyComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

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

useMemo

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

على غرار useCallback، بدون useMemo، سيتم إعادة تنفيذ الحسابات المعقدة في كل عملية تصيير، حتى لو لم تتغير قيم الإدخال. يمكن أن يؤثر هذا بشكل كبير على الأداء.

مثال: استخدام useMemo مع React.memo

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

const MyComponent = React.memo((props) => {
  console.log('Component rendered!');
  return <div>{props.data}</div>;
});

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

  const data = useMemo(() => {
    // Simulate a complex calculation
    console.log('Calculating data...');
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return input + result;
  }, [input]);

  return (
    <div>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <MyComponent data={data} />
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

في هذا المثال، يضمن useMemo أن قيمة data لا يتم إعادة حسابها إلا عند تغير حالة input. هذا يمنع MyComponent من إعادة التصيير بشكل غير ضروري ويتجنب إعادة تنفيذ الحساب المعقد في كل عملية تصيير للمكون الأب.

أمثلة عملية ودراسات حالة

دعنا نفكر في بعض السيناريوهات الواقعية حيث يمكن استخدام React.memo بفعالية:

مثال 1: تحسين مكون عنصر القائمة

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

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

مثال 2: تحسين مكون نموذج معقد

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

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

مثال 3: تحسين مكون رسم بياني

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

أفضل الممارسات لاستخدام React.memo

لتحقيق أقصى استفادة من React.memo، اتبع أفضل الممارسات التالية:

• حلل أداء تطبيقك: قبل تطبيق React.memo، استخدم أداة Profiler في React لتحديد المكونات التي تسبب اختناقات في الأداء. سيساعدك هذا على تركيز جهود التحسين على المجالات الأكثر أهمية.
• قس الأداء: بعد تطبيق React.memo، قس تحسن الأداء للتأكد من أنه يحدث فرقًا بالفعل.
• استخدم دوال المقارنة المخصصة بعناية: عند استخدام دوال المقارنة المخصصة، تأكد من أنها فعالة وتقارن فقط الخصائص ذات الصلة. تجنب إجراء عمليات مكلفة في دالة المقارنة.
• فكر في استخدام هياكل البيانات غير القابلة للتغيير: يمكن لهياكل البيانات غير القابلة للتغيير تبسيط مقارنة الخصائص وتسهيل منع عمليات إعادة التصيير غير الضرورية. يمكن لمكتبات مثل Immutable.js أن تكون مفيدة في هذا الصدد.
• استخدم useCallback و useMemo: عند تمرير الدوال أو القيم المعقدة كخصائص للمكونات المخزنة، استخدم useCallback و useMemo لمنع عمليات إعادة التصيير غير الضرورية.
• تجنب إنشاء الكائنات المباشر: سيؤدي إنشاء الكائنات بشكل مباشر كخصائص إلى تجاوز التخزين، حيث يتم إنشاء كائن جديد في كل دورة تصيير. استخدم useMemo لتجنب ذلك.

بدائل لـ React.memo

بينما يعد React.memo أداة قوية لتخزين المكونات، هناك طرق أخرى يمكنك التفكير فيها:

• PureComponent: بالنسبة للمكونات الصنفية (class components)، يوفر PureComponent وظائف مشابهة لـ React.memo. يقوم بإجراء مقارنة سطحية للخصائص والحالة قبل إعادة التصيير.
• Immer: هي مكتبة تبسط العمل مع البيانات غير القابلة للتغيير. تتيح لك تعديل البيانات بشكل غير قابل للتغيير باستخدام واجهة برمجة تطبيقات قابلة للتغيير، مما قد يكون مفيدًا عند تحسين مكونات React.
• Reselect: هي مكتبة توفر محددات (selectors) مخزنة لـ Redux. يمكن استخدامها لاشتقاق البيانات من مخزن Redux بكفاءة ومنع إعادة التصيير غير الضرورية للمكونات التي تعتمد على تلك البيانات.

اعتبارات متقدمة

التعامل مع السياق (Context) و React.memo

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

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

تصحيح مشاكل React.memo

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

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

الخاتمة

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

من خلال تطبيق تقنيات تخزين المكونات بعناية، يمكنك إنشاء تطبيقات React أكثر سلاسة واستجابة تقدم تجربة مستخدم أفضل.

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

• توثيق React.memo
• تحسين الأداء في React
• استخدام useMemo و useCallback