توقف عن حظر واجهة المستخدم: التصيير القابل للمقاطعة في React
عمليات التصيير في React قد تؤدي إلى تجميد واجهة المستخدم الخاصة بك.
العمليات الحسابية الثقيلة تحظر الخيط الرئيسي (main thread). يرى مستخدموك شاشة متجمدة، مما يفسد تجربة الاستخدام.
التصيير القابل للمقاطعة (Interruptible rendering) يحل هذه المشكلة؛ فهو يسمح لـ React بإيقاف العمل مؤقتًا للتعامل مع مدخلات المستخدم.
كيف يعمل الأمر:
- يقوم React بتقسيم العمل إلى أجزاء صغيرة.
- يتحقق من المهام ذات الأولوية العالية مثل النقرات أو الكتابة.
- إذا تفاعل المستخدم، يقوم React بإيقاف المهمة الخلفية مؤقتًا.
- يتعامل React مع المدخلات أولاً.
- يستأنف React المهمة الخلفية لاحقًا.
يمكنك استخدام الـ transitions لإدارة ذلك. استخدم useTransition لتمييز التحديثات غير العاجلة، وهذا يخبر React بالحفاظ على استجابة واجهة المستخدم.
توقف عن السماح لمعالجة البيانات الثقيلة بتدمير أداء تطبيقك.
المصدر: https://dev.to/iprajapatiparesh/stop-blocking-the-ui-interruptible-rendering-in-react-32mb