چگونه اپلیکیشن‌های React Native را برای عملکرد بالا و مصرف باتری کمتر بهینه کنیم؟

React Native یکی از قدرتمندترین فریم ورک های موجود برای ساخت برنامه های موبایل چند سکویی است. از آنجایی که بهینه سازی کارایی و عمر باتری برای کاربران موبایل از اهمیت فراوانی برخوردار است، در این مقاله به بررسی راه هایی برای رسیدن به این اهداف در فریم ورک React Native می پردازیم.

اگر هنوز با مفاهیم پایه‌ی React Native آشنایی ندارید، پیشنهاد می‌کنم ابتدا دوره‌ی React Native Fundamentals را دانلود و مشاهده کنید تا راحت‌تر بتوانید از این تکنیک‌ها استفاده نمایید.

1. استفاده از به روزترین نسخه React Native

ورژن های به روزرسانی شده React Native، معمولا از نظر عملکرد ارتقا پیدا کرده اند و مشکلات آن ها برطرف شده است؛ درنتیجه استفاده از این نسخه های به روز شده می تواند مزایای زیادی به همراه داشته باشد. برای آپدیت کردن React Native می توانید از کد زیر استفاده کنید.

npx react-native upgrade

2. از رندرهای غیرضروری پرهیز کنید

رندرهای غیرضروری باعث کاهش سرعت برنامه شما می شوند. برای جلوگیری از این مشکلات می توانید یکی از کارهای زیر را انجام دهید.

• برای کامپوننت های تابعی که نیازی به رندها ندارند، از React.Memo استفاده کنید.
• برای کامپوننت های بر مبنای کلاس، به جای Componentاز PureComponentاستفاده کنید.
• برای ذخیره توابع و مقادیر از useCallback و useMemo استفاده کنید.

به منظور درک کامل این روش، به مثال زیر توجه کنید.

const MyComponent = React.memo(({ data }) => {

  return <>{data}</>;

});

برای یادگیری بیشتر در مورد معماری، عملکرد، و طراحی اپلیکیشن‌های واقعی با React Native، می‌توانید دوره‌ی جامع Mastering React Native - Complete Guide to App Development را دانلود کنید.

3. بهینه سازی تصاویر

تصاویر بزرگ علاوه بر اینکه سرعت برنامه را کاهش می دهند، از باتری نیز استفاده زیادی می کنند. برای بهینه سازی تصاویر، بهتر است به جای تصاویر با فرمت PNG و JPG از WebP استفاده کنید که فشرده سازی بیشتری را به همراه دارد. همچنین سایز تصاویر را با توجه به رزولوشن صفحه نمایش خود عوض کنید و برای دانلودها از CDNاستفاده نمایید. به مثال زیر که نحوه استفاده از react-native-fast-image را بیان می دارد دقت کنید:

import FastImage from 'react-native-fast-image';

<FastImage

  style={{ width: 100, height: 100 }}

  source={{ uri: 'https://your-cdn.com/image.webp' }}

  resizeMode={FastImage.resizeMode.contain}

/>

4. کاهش سایز JavaScript bundle

JavaScript bundle های بزرگ، زمان شروع به کار برنامه را افزایش می دهند. برای بهینه سازی آن ها، وابستگی های غیرضروری را حذف کنید. از Hermes motors ها مانند ( موتور جاوااسکریپت سبک) برای اندروید استفاده کنید و تقسیم بندی کد و بارگیری تنبل را فعال کنید. برای فعال سازی Hermes motors، فایل android/app/build.gradle را ویرایش کنید.

project.ext.react = [

enableHermes: true // Add this line

]

5. بهینه سازی مدیریت وضعیت

به روز رسانی های نامناسب مدیریت وضعیت، منجر به از دست رفتن کارایی می شوند. برای بهینه سازی آن ها، از به روزرسانی های غیر ضروری use-state اجتناب کنید. همچنین برای مدیریت وضعیت های ساده از Context API و Redux بهینه شده استفاده کنید. علاوه بر آن می توانید به جای Redux از Zustand و Recoil استفاده نمایید.

6. درخواست های غیرضروری به سرورها را کاهش دهید

تعداد زیاد درخواست های API، باعث کند شدن برنامه ها و افزایش استفاده از باتری می شود. برای بهینه سازی این موضوع، از حافظه های پنهان (Caching) مانند AsyncStorage و یا React Query استفاده کنید. برای ورودی های جستجو، به منظور جلوگیری از ارسال مقادیر زیادی از درخواست از Debouncing استفاده کنید. همچنین برای به روزرسانی های آنی، به جای polling از WebSocket استفاده کنید.

7. برای مسئولیت های سنگین از ماژول های محلی استفاده کنید

برای انجام کارهای سنگین مانند پردازش تصاویر برای انیمیشن، از ماژول های محلی استفاده کنید تا به کارایی بهتری دست پیدا کنید. برای مثال، برای انیمیشن ها از react-native-reanimatedاستفاده نمایید. همچنین برای ژست های روان تر از react-native-gesture-handler استفاده نمایید.

8. لیست ها را با استفاده از FlatList بهینه کنید

برای نمایش لیست های طولانی، به جای استفاده از ScrollView از FlatList با تنظیمات بهینه شده استفاده کنید. به مثال زیر توجه کنید:

<FlatList

  data={data}

  renderItem={({ item }) => <Text>{item.name}</Text>}

  keyExtractor={(item) => item.id.toString()}

  initialNumToRender={10}

  maxToRenderPerBatch={5}

  removeClippedSubviews={true}

/>

9. بهینه سازی کارایی و نظارت

به منظور نظارت بر عملیات برنامه های مختلف چندین ابزار وجود دارد. ابزار React Nativeبرای رفع کردن خطاهای عملکردی مورد استفاده قرار می گیرد. Flipper ابزاری است که برای بررسی درخواست های شبکه، لاگ ها و سایر موارد استفاده می شود همچنین Perf Monitor برای تنظیمات توسعه دهنده نیاز است.

10. بهینه سازی استفاده از باتری

برای کاهش استفاده از باتری، استفاده از سرویس های پس زمینه و تایمرهای غیرضروری را کاهش دهید. همچنین از GPS تنها زمانی که به آن نیاز است استفاده کنید. زمانی که باتری گوشی شما کم است استفاده از انیمیشن ها را به حداقل برسانید و در آخر، استفاده از برنامه های پس زمینه و تعداد بالای polling را به حداقل برسانید.

سخن آخر

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