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

المشكلة: عدد كبير جدًا من الحالات === عدد كبير جدًا من عمليات إعادة العرض

لنتخيل أن لدينا مكونًا يدير بيانات المستخدم. يمكننا أن نعلن هذه الحالات بشكل مستقل، مثل هذا:

const UserComponent = () => {
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [address, setAddress] = useState('');
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [occupation, setOccupation] = useState('');

  // Funções de atualização dos estados
  const updateName = (newName) => setName(newName);
  const updateAge = (newAge) => setAge(newAge);
  // e assim por diante...

  return (
    ...
  );
};

لدينا هنا 6 حالات مستقلة، في كل مرة يتم تحديث إحدى هذه الحالات، تتم إعادة عرض مكون بالكامل، تخيل الآن أننا بحاجة إلى تحديث الحالات الست... نعم، نحن نعرض هذا المكون 6 مرات.

الحل: إنشاء حالة واحدة فقط فيما يتعلق بمعلومات المستخدم

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

const UserComponent = () => {
  const [user, setUser] = useState({
    name: '',
    age: 0,
    address: '',
    email: '',
    phone: '',
    occupation: ''
  });

  // Função para atualizar o estado do usuário
  const updateUser = (newData) => {
    setUser((prevState) => ({
      ...prevUser,
      ...newData,
    }));
  };

  return (
    ...
  );
};

الآن، بدلاً من وجود وظيفة لكل حالة، لدينا وظيفة updateUser، التي تتلقى فقط التغييرات المطلوبة ودمجها مع الحالة السابقة باستخدام عامل الانتشار (...). يتيح لك هذا تحديث جزء فقط من الحالة، بينما يظل الباقي دون تغيير.

إذا كنت تريد تغيير معلومة واحدة فقط حول الكائن، فقم بذلك:

setUser((prevState) => ({...prevState, age: 25}))

اختلاف

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

المزايا

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

وهذا! أتمنى أن أكون ساعدت!!!
على الرغم من أنني لا أزال في مرحلة التطوير، إلا أن هذه محفظتي: https://lucaslima.vercel.app (أتمنى أن تكون جاهزة عند الوصول إليها هههههههههه)

نجاح! ?