رابط کاربری را مسدود نکنید: رندرینگ قابل توقف در React
رندرهای React میتوانند رابط کاربری شما را منجمد کنند.
محاسبات سنگین، رشته اصلی (main thread) را مسدود میکنند. کاربران شما یک صفحه منجمد شده را میبینند. این موضوع تجربه کاربری را خراب میکند.
رندرینگ قابل توقف (Interruptible rendering) این مشکل را حل میکند. این قابلیت به React اجازه میدهد تا برای رسیدگی به ورودیهای کاربر، کار را متوقف کند.
نحوه عملکرد:
- React کار را به تکههای کوچک تقسیم میکند.
- این قابلیت وظایف با اولویت بالا مانند کلیک یا تایپ کردن را بررسی میکند.
- اگر کاربر تعاملی داشته باشد، React کار پسزمینه را متوقف میکند.
- React ابتدا به ورودی رسیدگی میکند.
- سپس React کار پسزمینه را از سر میگیرد.
شما برای مدیریت این فرآیند از transitionها استفاده میکنید. از useTransition برای علامتگذاری بهروزرسانیهای غیرفوری استفاده کنید. این کار به React میگوید که رابط کاربری را پاسخگو (responsive) نگه دارد.
اجازه ندهید پردازش سنگین دادهها، عملکرد اپلیکیشن شما را از بین ببرد.
منبع: https://dev.to/iprajapatiparesh/stop-blocking-the-ui-interruptible-rendering-in-react-32mb