تیم ری‌اکت دارن چیکار می‌کنن؟ (قسمت ششم)

بعد از مدت‌ها یسری PR جذاب روی React دیدم که یکیشون رو برای این مقاله انتخاب کردم.
این PR هم روی کامپوننت SuspenseList کار می‌کنه.
اگه نمی‌دونید SuspenseList چیه مقاله های‌زیر رو بخونید: (مخصوصا دومی رو چون باهاش کار داریم)

قبل از هرچیز یه نکته‌ای رو بگم که اطلاعاتم راجب این کامیت کامل نیست و دارم برداشت خودم از نوشته های سباستین +‌ تغییرات PR رو می‌نویسم.

خب حالا تو این کامیت جدید چی به SuspenseList اضافه شده؟

من‌بعد یه پراپ جدید داریم به اسم tailMode که با توجه به این خط ها فقط با revealOrder های forwards و backwards کار می‌کنه.

اگه یادتون باشه راجب forwards گفتیم حتی اگه دیتای یه کامپوننت حاضر باشه منتظر کامپوننت های قبل خودش میمونه تا Suspense شون به اتمام برسه بعد نمایش داده بشه. حالا اگه ۴ تا کامپوننت داشته باشیم به اسم های A, B, C و کامپوننت A مون resolve شده باشه، چه بلایی سر کامپوننت های B و C میاد؟ تو حالت عادی جفتشون fallback خودشون رو نشون میدن. و پراپ جدید tailMode برای کنترل کردن این fallback ها یا اصطلاحا tail ‌‌کامپوننت SuspenseList اومده.

اگه tailMode رو برابر collapsed قرار بدیم این fallback ها collapse میشن و فقط اولیشون نمایش داده میشه. یعنی اگه سه‌تا کامپوننت A, B, C داشته باشیم و اولی resolve شده باشه, فقط کامپوننت B مون fallback نشون میده و کامپوننت C هیچ چیزی نمایش نمیده.

باید تاکید کنم که این prop فقط روی "نمایش داده شدن" کامپوننت ها اثر میذاره و کاری با پردازش شدن یا نشدنشون نداره. یعنی در همین حین که کامپوننت C هیچ fallback ای نمایش نمیده اما تو پشت صحنه مشغول fetch کردن دیتاش/انجام دادن کارش هست.

راجب کاربردش, چیزی که فعلا به ذهن من میرسه صفحه فیده. فرض کنید یسری پست داریم که revealOrder شون روی forwards هست و یکی یکی باید نمایش داده بشن و fallback شون هم spinner عه. حالا اگه tailMode رو نداشته باشیم یه عالمه اسپینر میبینم ولی باوجود tailMode میتونیم جوری کامپوننت SuspenseList ری‌اکت رو تنظیم کنیم که فقط اولین Spinner رو نشون بده و بقیشون نمایش داده نشن. صد البته که چیزی که خود سباستین از کاربردهاشون میدونه خیلی گسترده تره، یه صحبت‌هایی هم راجب sssr کرده که چون هنوز نه مقاله‌ای راجب Fizz نوشتم و نه کاری برای مقدارهای دیگه‌ای که tailMode میتونه بپذیره انجام شده, فعلا بازش نمی‌کنم.

https://github.com/facebook/react/pull/16007

دیگر مقالات من: