{item.name}

import React, { useState } from 'react';

const Counter = React.memo(function Counter({ count }) {
  console.log('Counter component re-rendered');
  return 
Count: {count}
;
});

function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    

      
       setCount(count   1)}>Increment Count
       setText(e.target.value)} placeholder="Type something..." />
    
  );
}

export default App;

متى تستخدم مذكرة React؟

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

: المكونات التي لا تتغير في كثير من الأحيان ، مثل الرؤوس أو التذييلات.

1. مكونات وظيفية نقية : مكونات تعتمد فقط على الدعائم لتقديمها.
2. قوائم كبيرة من المكونات : قوائم مع العديد من العناصر التي تحتاج إلى تجنب إعادة الترتيب غير الضرورية.
3. المزالق المحتملة وأفضل الممارسات

مقارنة ضحلة

1. مراقبة الأداء

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

2. الأسئلة المتداولة (الأسئلة الشائعة)

Q1: كيف تختلف مذكرة React عن Usememo و Usecallback؟

يحسن أعمدة المكونات بناءً على الدعائم.

• usememo Caches القيم المحسوبة داخل مكون.
• usecallback وظائف Caches ، ومنعها من إعادة إنشاءها على كل عرض.
• س 2: هل يمكنني استخدام مذكرة React مع مكونات الفصل؟ لا ، مذكرة رد الفعل هي فقط للمكونات الوظيفية. ومع ذلك ، بالنسبة لمكونات الفصل ، يمكن تحقيق سلوك مماثل مع Purecomponent.

خاتمة

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