برنامه نویسی 300 بازدید

در این مقاله برخی از نکاتی که برای سرعت بخشیدن به اجرای اپلیکیشن react native و رسیدن به نرخ‌های فریم (FPS) بالا نیاز است را بررسی می‌کنیم.

1. استفاده از PureComponent یا shouldComponentUpdate

PureComponent در React پیش از به‌روزرسانی کامپوننت مقایسه‌ای سطحی از props و state صورت می‌دهد. این قابلیت باعث می‌شود که کامپوننت تنها در صورتی مجدداً رندر شود که تغییراتی در props یا state ایجاد شده باشد.

متد چرخه عمر shouldComponentUpdate به طور منظم اجرا می‌شود تا کامپوننت‌های ناخالص React با بازگشت مقدار false در سناریوهای خاص رندر مجدد را لغو کنند.

دو قطعه کد زیر مفاهیم فوق را به صورت عملی نشان می‌دهند:

هر دو نمونه از کد فوق می‌توانند به کاهش رندرهای بیهوده کمک کنند. مثال اول از پیاده‌سازی منطق shouldComponentUpdate استفاده می‌کند. مثال دوم امکان داشتن کنترل بیشتری را ایجاد می‌کند. در این حالت می‌توان state را در کامپوننت تعیین کرد و در صورتی که تغییر یافته باشد، رندر مجدد صورت بگیرد. روش کار به صورت زیر است:

2. استفاده از خصوصت کلید روی آیتم‌های لیست

لیست پراستفاده‌ترین چیز در هر اپلیکیشن است. اگر برای هر آیتم لیست، کلید یکتایی تعریف نکنید، react هنگامی که آیتمی به لیست اضافه یا از آن حذف شود، همه آیتم‌ها را مجدداً رندر می‌گیرد. داشتن یک کلید یکتا روی هر آیتم لیست باعث صرفه‌جویی در رندر مجدد react می‌شود.

3. اتصال زودهنگام و عدم ایجاد تابع‌ها درون رندر

بدین منظور باید به روش زیر عمل کنید:

کارهای زیر نباید درون رندر صورت بگیرد.

یا

چون رندر به صورت مکرر فراخوانی می‌شود و هر بار هم دو کار فوق تکرار می‌شوند و تابع جدیدی ایجاد می‌شود.

اگر می‌خواهید آرگومان‌ها را به تابع doWork ارسال کنید، ممکن است لازم باشد یک کامپوننت فرزند ایجاد کرده و آن را به صورت یک prop به تابع ارسال کنید.

و در کامپوننت فرزند:

اگر ایجاد کامپوننت نوعی سربار محسوب می‌شود، در این صورت همواره دستاورد عملکردی اندکی وجود خواهد داشت. می‌توان از یک closure مانند زیر استفاده کرد. این تابعی است که قرار است در هر بار رندر مجدد ایجاد شود.

در چنین مواردی باید بین میزان خوانایی و عملکرد تعادلی برقرار کنید.

4. عدم به‌روزرسانی state یا انتخاب اعمال در componentWillUpdate

متد چرخه عمر componentWillUpdate برای آماده‌سازی یک به‌روزرسانی استفاده می‌شود و نه اجرای یک به‌روزرسانی دیگر. اگر می‌خواهید یک state تعیین کنید باید این کار را در componentWillReceiveProps انجام دهید. همچنین componentDidUpdate برای انتخاب هر یک از اعمال redux نسبت به componentWillReceiveProps ترجیح دارد.

5. استفاده از VirtualizedList ،FlatList و SectionList برای مجموعه داده‌های بزرگ

بر اساس مستندات React native می‌دانیم که VirtualizedList, FlatList و SectionList رابط‌های ارجح برای رندر کردن لیست‌ها هستند، چون از حافظه کمتری استفاده می‌کنند. بنابراین اگر لیستی با صدها ردیف دارید، همه آن‌ها تا زمانی که اسکرول نکرده‌اید، روی صفحه بارگذاری نمی‌شوند.

6. استفاده از Perf monitor برای مشاهده FPS

بخش developer tools را باز کرده و perf monitor را فعال کنید. اینک هر زمان که شروع به تعامل بکنید، به بخش‌های مختلف بروید یا روی اپلیکیشن اسکرول بکنید، می‌توانید نرخ فریم‌های از دست رفته را مشاهده کنید. در اغلب موارد این فریم‌های از دست رفته در نخ (thread) جاوا اسکریپت هستند و نه نخ UI. از این رو باید به دنبال ریشه مشکل بود، یعنی جایی که نرخ فریم از دست می‌رود. ممکن است تعیین حالت یا انتخاب اعمال redux در مکان نامناسبی صورت می‌گیرد. یا این که کارهای همگام زیادی روی نخ جاوا اسکریپت صورت می‌گیرند.

اگر این مطلب برایتان مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

telegram
twitter

میثم لطفی

«میثم لطفی» دانش‌آموخته ریاضیات و شیفته فناوری به خصوص در حوزه رایانه است. وی در حال حاضر علاوه بر پیگیری همه علاقه‌مندی‌های خود در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و تولید محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار نیز با مجله فرادرس همکاری دارد.

بر اساس رای 1 نفر

آیا این مطلب برای شما مفید بود؟

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *