React به دلیل سریع بودن شناخته شده است. این کتابخانه به عنوان یک کتابخانه مبتنی بر کامپوننت به بازار عرضه می شود که DOM را با استفاده از یک الگوریتم متفاوت DOM مجازی به روز می کند.
بنابراین چرا بسیاری از برنامه های واکنش پذیر … احساس کندی می کنند؟
زیرا واکنش سریع است – اما جادویی نیست.
عملکرد در React به طور پیش فرض انجام نمی شود. این ناشی از تصمیمات است. و در پروژه های دنیای واقعی ، ما اغلب موارد اشتباهی می سازیم.
حس کاذب سرعت
React باعث می شود توسعه سریع احساس شود. بارگیری مجدد ، کد اعلانی ، اجزای قابل استفاده مجدد را مشاهده می کنید. این می تواند توسعه دهندگان را به فکر فکر کردن محصول نهایی نیز انجام دهد.
اما ادراک ≠ واقعیت.
مشکلات ارائه ، بسته های نفخ ، کار نادرست دولت و مسدود کردن عملیات می تواند برنامه شما را لاغر کند – حتی اگر با آخرین نسخه React ساخته شود.
جایی که همه چیز اشتباه می شود
بیایید برخی از رایج ترین اشتباهاتی را که بی صدا عملکرد را از بین می برد ، تجزیه کنیم:
- رأی دهندگان کنترل نشده کنترل کننده هر زمان که حالت یا غرفه ها تغییر کنند ، واکنش مجدد را واکنش نشان می دهند-اما این همیشه لازم نیست.
مثال:
رفع:
نتیجه const = usememo (() => expensiveColculation (داده) ، [data]) ؛
- سوءاستفاده از دولت جهانی با استفاده از متن React در همه جا؟ ممکن است شما در هر تغییر مجدداً کل برنامه خود را ارائه دهید.
زمینه برای داده های استاتیک بسیار عالی است – نه برای وضعیت سریع در حال تغییر.
در صورت نیاز به کنترل ریز دانه ، از ابزارهای مدیریت دولتی مانند Zustand ، Jotai یا Redux Toolkit استفاده کنید.
- هیچ بارگذاری تنبل هنوز کل برنامه خود را در یک پرونده JS قرار می دهد؟ این خیلی سال 2016 است.
برنامه خود را با React.Lazy و Suspense-به خصوص برای مسیرها و مودال ها به تکه های تنبل بارگذاری کنید.
- کتابخانه های غول پیکر در بسته نرم افزاری یک تقویم یا کتابخانه نمودار می توانند صدها کیلوبایت را به بسته نرم افزاری شما اضافه کنند. چند مورد دیگر اضافه کنید ، و کاربران قبل از دیدن UI شما مگابایت را بارگیری می کنند.
برای ردیابی و کاهش اندازه بسته ، از ابزارهایی مانند BundlePhobia ، منبع نقشه-نقشه یا برنامه وب-Bundle-Analyzer استفاده کنید.
- نادیده گرفتن لیست مجازی سازی 5000 گره DOM به طور همزمان؟ این تقصیر React نیست. از کتابخانه هایی مانند React-Window یا React-Virtualized استفاده کنید تا فقط آنچه را که قابل مشاهده است ارائه دهید.
React برنامه ها را کند نمی کند – سوء استفاده می کند
React ابزارهایی را به شما می دهد: یادداشت ، usememo ، useCallback ، بارگذاری تنبل ، مرزهای تعلیق ، ارائه همزمان و موارد دیگر.
اما استفاده از آنها به عهده شماست.
انعطاف پذیری React یک شمشیر دو لبه است. با قدرت عالی مسئولیت بزرگی به وجود می آید – یا در این حالت ، در صورت سوءاستفاده از مشکلات عملکرد خوبی برخوردار است.
کاری که امروز می توانید انجام دهید
رندرهای خود را با Profiler React DevTools حسابرسی کنید.
از یادآوری عاقلانه استفاده کنید – اما بیش از حد از آن استفاده نکنید.
اجزای بزرگ مدولار و تنبل.
لیست های طولانی را مجازی کنید.
اندازه بسته نرم افزاری خود را به طور مرتب تمیز و تجزیه و تحلیل کنید.
ایالت خود را در صورت امکان محلی و محلی نگه دارید.
فکر نهایی
واکنش آهسته نیست. این فقط وحشیانه صادقانه است.
این دقیقاً همان چیزی را که شما ایجاد کرده اید منعکس می کند – از جمله همه اشتباهات عملکردی که در طول مسیر مرتکب شده اید.
بنابراین دفعه بعد که برنامه React شما آهسته احساس می شود ، چارچوب را سرزنش نکنید.
تصمیمات خود را سرزنش کنید.
