• 1404/02/18

سوال در خصوص زمان رندر شدن در فیلم 65 :

سلام وقت بخیر

در فیلم 65 یه سوال اساسی در خصوص رندرینگ ری اکت برام پیش اومد

شما در ایونت onchange تکس باکس تعیین کردین url عوض بشه یا نه

و کد مربوط به تغییر لیست کتاب ها رو خارج از بلاک این ایونت نوشتین

سوالم اینه که چه زمانی رندر مجدد اتفاق افتاد که کدهای مربوط به تغییر لیست کتاب ها که با تابع فیلتر نوشتین اجرا شدن؟

با onchange ؟ یا با تغییر url ؟؟

لطفا در این خصوص راهنماییم کنید

  • 1404/02/18
  • ساعت 14:55

سلام دوست من

جواب کوتاه اینه که هر دو باعث رندر مجدد میشن.

 یعنی هم onChange و هم تغییر URL (از طریق setSearchParams) باعث رندر مجدد (re-render) میشن. 

وقتی کاربر توی input تایپ میکنه (onChange) :

setSearchParams({ filter });

این تابع (که معمولاً از useSearchParams ری اکت Router گرفته شده) باعث میشه URL تغییر کنه چون query string (?filter=...) عوض میشه.

تغییر URL = تغییر در searchParams

چون searchParams در state ری‌اکت‌ Router نگهداری میشه تغییرش باعث میشه کامپوننت ریفرش بشه (از نو اجرا بشه).

پس کامپوننت دوباره رندر میشه و این خط:

books.filter(...)

دوباره اجرا می‌شه.

پس در واقع onChange مستقیماً باعث رندر نمیشه ولی setSearchParams() که داخلش هست باعث تغییر state میشه و همین تغییر باعث رندر مجدد کل کامپوننت میشه.

رندر مجدد دقیقاً زمانی اتفاق می‌افته که مقدار searchParams تغییر کنه و این تغییر از طریق setSearchParams در onChange انجام میشه.

 


  • 1404/02/18
  • ساعت 16:08

ممنون از پاسخ جامع و خوبتون استاد عزیزم


logo-enamadlogo-samandehi