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

هل React يقوم بعمل batch للحالة إن كانت بداخل دالة async؟

Adam Ebrahim

السؤال

في مكونات الصنف class components، تقوم this.setState بعمل batch إن كانت بداخل دالة لمعالجة حدث ما event handler، لكن ما الذي سيحدث إن تم تحديث حالة المكون من خارج event handler بإستخدام useState؟

function Component() {
  const [firstState, setFirstState] = useState('first');
  const [secondState, setSecondState] = useState('second');

  function handleClick() {
    Promise.resolve().then(() => {
      setfirstState('First State Changed');
      setsecondState('Second State Changed');
    });
  }

  return (
    <button onClick={handleClick}>
      {firstState}
      <br />
      {secondState}
    </button>
  )
}

ما الذي سيحدث في الكود السابق؟ هل سيتم تحديث الحالة وعرضها أيضًا في المتصفح؟

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

Recommended Posts

  • 0

قبل البداية في الرد على السؤال لديك خطأ بسيط في كتابة أسماء الدوال التاليه عند إستدعائها داخل الداله handleClick 
وهما setfirstState  و setsecondState  والصحيح setFirstState و  setSecondState

ننتقل الى لب السؤال  بكل بساطة 
لدينا حالتين نقوم بعمل تحديث لل state فيها 
الحالة الأولى: إذا كنا داخل عملية غير تزامنيه (asynchronously)  
ففي هذه الحاله لا يتم عمل batching بل لكل تحديث لل State سوف يتم عملية render كامله  كما هو الحال في الكود الخاص بك المرفق في السؤال.

الحالة الثانية: في حالة قمنا بتحديث ال state مباشرة ودون التواجد داخل أي عملية غير تزامنيه 
فهنا يتم تنفيذ ال batching وتتم عملية ال render مرة واحدة فقط ويمكننا تعديل الكود الخاص بك قليلا كمثال على ذلك كالتالي

function Component() {
  const [firstState, setFirstState] = useState('first');
  const [secondState, setSecondState] = useState('second');

  function handleClick() {
   
      setfirstState('First State Changed');
      setsecondState('Second State Changed');
  }

  return (
    <button onClick={handleClick}>
      {firstState}
      <br />
      {secondState}
    </button>
  )
}

بالتوفيق إن شاء الله.

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...