بهبود اپلیکیشن های React.js (قسمت دوم)

گاهی اوقات اپلیکیشن سریع و بی نقص کار می‌کند و به اشتباه تصور می‌کنیم که نقصی ندارد ,کتابخانه ی React.js  ویژگی ها و تنظیماتی برای بهینه سازی اپلیکیشن ها در اختیار توسعه دهندگان قرار می دهد که این مقاله در ادامه ی مقاله ی قبلی به بررسی انواع روش ها برای بهبود کارایی اپلیکیشن های React.js میپردازیم.

1-useCallback()

به کمک هوک useCallback میتوانیم از re-render های غیر ضروری جلوگیری کنیم و کد بهینه تری داشته باشیم. useCallback یک Callback به صورت memorized بازمی‌گرداند و یک تابع و یک آرایه‌ از dependency ها رو به عنوان ورودی میگیرد. اگر یکی از مقادیر آرایه تغییر کند خروجی عوض میشود و اگه تغییر نکند، مقدار کش شده برگردانده میشود

useCallback(
    FooFunction()
}, [dependencies]);

2-عدم نمایش لیست طولانی

نباید یک لیست طولانی و داده زیاد را در اپلیکیشن خود رندر کنید و توصیه می شود دیتا را بخش بندی کنید و در هر viewport کاربر، قسمتی از لیست را به او نمایش دهید و تمام لیست را یکدفعه در لود اولیه نمایش ندهید.برای مشاهده ادامه لیست می توان با اسکرول کاربر اینکار را انجام داد یا اینکه صفحه بندی (pagination) پیاده سازی شود

3-تکنیک بارگذاری تنبل یا Lazy loading

بارگذاری تنبل یا Lazy Loading یکی از تکنیک های رایج و محبوب برای افزایش سرعت لود نرم افزار و وب سایت می باشد. به منظور Lazy Load کردن کامپوننت های ریکت، React.lazy() API مورد استفاده قرار می گیرد.

 بارگذاری تنبل (Lazy loading) ویژگی جدیدی بود که در نسخه 16.6 ریکت ارائه شد. این قابلیت به توسعه دهندگان ری اکت کمک می کند تا براحتی بتوانند بارگذاری تنبل و code=splitting را پیاده سازی کنند.تابع React.lazy به ما این امکان را می دهد تا یک dynamic import را بصورت یک کامپوننت عادی و regular رندر کنیم.

4-در زمان کار با گره‌های DOM از ارجاع Callback به جای ارجاع شیء استفاده کنید

با این که React.useRef در زمینه الصاق و کنترل ارجاع‌ها به یک گره DOM جدید محسوب می‌شود، اما همواره بهترین گزینه نیست. برخی اوقات می‌خواهیم کنترل بیشتری روی گره DOM داشته باشیم تا بتوانیم کارکرد اضافه‌ای عرضه کنیم.مستندات ری‌اکت موقعیتی را توصیف می‌کنند که باید از یک ارجاع callback برای مطمئن شدن از این واقعیت استفاده کنیم که وقتی تغییراتی در مقدار ref کنونی ایجاد می‌شود، یک کامپوننت خارجی همچنان می‌تواند از به‌روزرسانی‌ها مطلع شود. این مزیتی است که ارجاع‌های Callback نسبت به useRef دارند, Material-ui از این مفهوم قدرتمند استفاده می‌کند تا کارکردهای اضافی را از طریق ماژول‌های کامپوننت عرضه کند. مهمترین بخش در این مورد آن است که این رفتار به صورت طبیعی موجب پاکسازی می‌شود.

قسمت قبل https://vrgl.ir/6JNq3