اذهب إلى المحتوى
  • 0

React يعيد تقييم المكون بأكمله عند تحديث الحالة - كيف يمكنني إصلاح ذلك؟

Abdelrahman Mostafa10

السؤال

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

الكود:

import React, { useState } from 'react';

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

  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={handleIncrement}>زيادة</button>
    </div>
  );
};

export default MyComponent;

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

كيف يمكنني تحسين ذلك وتجنب إعادة التقييم الزائد؟

تم التعديل في بواسطة Abdelrahman Mostafa10
رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

في react عند تغيير الstate يتم عمل rerender للcomponent كامل 
ولكن للحد من تلك المشكلة يتم اللجوء لإستخدام حلول مثل useMemo
حيث أنة يتم تقسيم الكود الي components أصغر 
و تستعمل useMemo لإخبار react أن ذلك الcomponent لن يحدث له rerender الا في حالة تغير الstates الموجودة في قائمة الإعتمادات أو الarray of dependencies

و أيضا استعمال useCallBack لعدم تعريف الfunction من جديد في كل مرة يتم فيها عمل rerender للcomponent

import React, { useState } from 'react';

const DisplayCount = React.memo(({ count }) => {
  console.log('Rendering DisplayCount');
  return <p>العدد: {count}</p>;
});

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

  const handleIncrement = React.useCallBack(()=>{ setCount(count + 1);
	},[setCount,count])


  return (
    <div>
      <DisplayCount count={count} />
      <button onClick={handleIncrement}>زيادة</button>
    </div>
  );
};

export default MyComponent;
رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

في الحقيقة، مشكلة اعادة تحميل ال component في react هي ليست مشكلة، بل هي أمر متضمن بالمكتبة وينفذ by default في حالات معينة (ليس دائما).

مع ذلك، يمكنك تحديث الحالة بطريقة صحيحة لتجنب حدوث ذلك، وهذه هي الطريقة:
 

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

// تحديث الحالة الخاطئ
const handleIncrement = () => {
  setCount(count + 1);
};

// تحديث الحالة الصحيح
const handleIncrement = () => {
	setCount(prev => prev + 1)
}

ال prev هنا هو الحالة السابقة لل state، أي أن العداد يبدأ عند القيمة 0، وعند التحديث يقوم بجلب هذا ال 0 ويزيد فوقه المقدار 1، مما يمنع اعادة تحميل ال component كله.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...