اولین چیزی که نظرمو جلب کرد RootApp جدیدی هست که باید به دیدنش عادت کنید.
ما کامپوننت اصلی App را به react dom.render و سپس document.getElementById و عنصر ریشه خود را پاس می کنیم. بنابراین ما component اصلی خود را به عنصر ریشه صفحه رندر می کنیم. خیلی ساده!
این یه روش جدید است. ما یک component App داریم که برابر با روش جدیدی به نام create root است. این عنصر ریشه ما ارسال می شود و سپس root.render را فراخوانی می کنیم و component برنامه خود را پاس می کنیم
React Suspense
همانطور که از اسمش پیداست تعلیق یا تاخیر پیش امده رو با یه کامپوننت دیگه پوشش میده.
در واقع تا زمانی که آماده رندر بشه اون کامپوننت به حالت تعلیق در می یاد
در این مثال، ما کامپوننتی داریم که برای واکشی داده ها قبل از آماده شدن برای رندر به زمان نیاز دارد. منظور از زمان اینه که ممکنه چند ثانیه منتظر پاسخ سرور برای دریافت یه API باشه.
در این حالت میتوتید به راحتی یه کامپوننت Loading به کاربر نشون بدید. و مطمین بشید تا قبل اینکه شما نگفتید کامپوننت اجرا یا mount نمیشه
Suspense تا زمانی که داده ها برگردانده نشده باشد مقدار مؤلفه fallback رو نمایش میدهد ،مثلا کامپوننت Loading رو تازمانی که بهش گفته نشود ظاهر میشود.
Suspense از حالت بازگشتی استفاده می کند. در اینجا مهم است که توجه داشته باشید که مؤلفه تصادفی در اینجا منتظر داده نیست، اما همچنان تا زمانی که همه چیز در داخل تعلیق آماده ارائه شود، به حالت تعلیق در می‌آید. و اکنون تعلیق با SSR یا رندر سمت سرور بسیار مفید خواهد بود. در حال حاضر، با SSR شما به طور کامل HTML را دریافت خواهید کرد، اما مرورگر شما هنوز باید جاوا اسکریپت را بارگیری کند و کل صفحه را قبل از اینکه بتواند تعاملی شود، آبرسانی کند. تعلیق می تواند این زمان بارگذاری را به طرز چشمگیری افزایش دهد.
برای درک بیشتر یه مثال از خود بلاگ وبسایت React در اینجا میزارم.
صفحه ای داریم متشکل از کامپوننت های نوار Sidebar یک SideBar، Post و کامپوننت Comment
در این مثال، ما Sidebar و Comment را به حالت تعلیق در می آوریم.
Hydration از اولین جزء معلق درخت آغاز می شود. بنابراین Sidebar ابتدا Hydration می شود
اگر ما واقعاً نیازی به بارگذاری Comment قبل از تعاملی شدن سایت نداریم. پس ما Comment را به حالت تعلیق در می آوریم. تا بازدید کننده شروع به خواندن مقاله کند
و سپس Comment را در پس زمینه بارگذاری می کنیم.
