عملکرد React از معماری شروع می‌شود
چک‌لیستی کاربردی برای سریع‌تر کردن رابط‌های React بدون بهینه‌سازی زودهنگام.
پاسخ کوتاه
بهترین مسیر بهبود عملکرد React با اندازهگیری گلوگاه واقعی، نزدیک نگه داشتن state به محل مصرف و کاهش جاوااسکریپت غیرضروری سمت کاربر آغاز می‌شود.
توضیح کامل
از تأخیری شروع کنید که کاربر می‌بیند: بارگذاری، تعامل یا رندر. پیش از تغییر کد از profiler مرورگر و Core Web Vitals استفاده کنید. صفحه‌ها را بر اساس مسئولیت تقسیم کنید، برای محتوای ثابت خروجی سرور را ترجیح دهید و فقط کامپوننت‌هایی را client کنید که واقعاً به تعامل نیاز دارند. memoization پس از اندازهگیری مفید است، اما جای جریان داده روشن را نمی‌گیرد.
مثال‌ها
عبارت جست‌وجو را در کوچک‌ترین کامپوننت تعاملی نگه دارید، گالری سنگین را lazy-load کنید و برای فهرست‌ها key پایدار به کار ببرید. پس از هر تغییر همان مسیر کاربر را دوباره اندازه بگیرید.
دیدگاه توسعه‌دهنده
رابط‌های سریع معمولاً حاصل مسئولیت کمتر در هر کامپوننت و کار کمتر در مرورگرند. اختلاف نظر درباره بهینه‌سازی را باید profiler حل کند.
منابع
پرسش‌های پرتکرار
آیا همه کامپوننتهای React باید memo شوند؟
خیر. ابتدا اندازهگیری کنید و فقط جایی از memoization استفاده کنید که رندر تکراری واقعاً پرهزینه است.
اول چه چیزی را بهینه کنم؟
کندترین مسیر قابل مشاهده برای کاربر را که با داده واقعی یا profiler مشخص شده است بهینه کنید.