بیاموزید که چگونه از برنامه React Native خود بیشترین بهره را ببرید و بهترین تجربه را به کاربران خود ارائه دهید.
استفاده از اپلیکیشن موبایل باید یک تجربه لذت بخش، بدون تاخیر خسته کننده باشد. به عنوان یک توسعه دهنده React Native، بسیار مهم است که برنامه های خود را بهینه کنید، بنابراین آنها به خوبی کار می کنند و استفاده از آنها آسان است. اوج عملکرد برنامه مستلزم آن است که با استفاده از ابزارها و کتابخانه های مناسب کدی تمیز و کارآمد بنویسید.
به این نکات و تکنیک ها برای بهینه سازی عملکرد برنامه React Native خود نگاهی بیندازید.
1. رندرهای غیر ضروری را با useMemo Hook کاهش دهید
React Native کامپوننت ها را با استفاده از فناوری Virtual DOM (VDOM) رندر می کند. VDOM همه تغییرات در مؤلفه برنامه را ردیابی می کند و در صورت لزوم کل سلسله مراتب نمایش را مجدداً ارائه می دهد. این فرآیند پرهزینه است، بنابراین باید از به‌روزرسانی‌های غیرضروری در وضعیت و اجزای آن اجتناب کنید.
کتابخانه React قلاب‌های useMemo و useCallback را برای حل این مشکل در اجزای عملکردی فراهم می‌کند. می‌توانید از قلاب useMemo برای به خاطر سپردن مقدار حاصل از یک تابع جاوا اسکریپت استفاده کنید که نمی‌خواهید در هر رندر مجدداً محاسبه شود.
در اینجا مثالی از نحوه استفاده از قلاب useMemo آورده شده است:
import { useMemo } from 'react';
function MyComponent({ data }) {
// The computeExpensiveValue function is an expensive computation that
// doesn't need to be re-computed on every render.
const expensiveValue = useMemo(() => computeExpensiveValue(data), [data]);
// The component can use the memoized value without re-computing
// it on every render.
return <div>{expensiveValue}</div>;
}
قرار دادن تابع computeExpensiveValue در داخل قلاب useMemo، نتیجه تابع را به خاطر می‌سپارد. قلاب useMemo می تواند آرگومان دوم را به عنوان یک وابستگی بپذیرد. این بدان معناست که تابع حافظه‌گذاری‌شده تنها زمانی که این وابستگی تغییر کند، Gain را اجرا می‌کند.
useCallback شبیه useMemo است، اما به جای مقدار، یک تابع callback را به خاطر می‌سپارد. این می تواند برای جلوگیری از رندرهای مجدد غیرضروری اجزای فرزند که توسط یک تابع callback ارسال می شود به عنوان یک پشتیبانی مفید باشد.
2. مدیریت موثر داده های دولت
مدیریت ضعیف وضعیت می تواند منجر به تناقضات داده ها شود و منجر به رفتار غیرمنتظره ای شود که ردیابی و رفع آن دشوار است. مدیریت حالت خوب شامل پرهیز از ذخیره داده‌های غیرضروری در حالت است که می‌تواند سرعت برنامه را کاهش داده و اشکال‌زدایی آن را سخت‌تر کند. مهم است که اطمینان حاصل شود که تمام حالتی که ذخیره می‌کنید برای نمایش کامپوننت کاملاً ضروری است.
راه دیگر برای به‌روزرسانی مؤثر حالت، استفاده از تکنیک‌های تغییرناپذیری، مانند عملگر spread یا متد Object.assign() است.
مثلا:
import React, { useState } from 'react';
function MyComponent() {
const [state, setState] = useState({
count: 0,
text: 'Hello'
});
function handleClick() {
setState(prevState => {
return Object.assign({}, prevState, { count: prevState.count + 1 });
});
}
return (
<div>
<button onClick={handleClick}>Increment Count</button>
</div>
);
}
در این مثال، تابع handleClick از قلاب setState برای به‌روزرسانی وضعیت استفاده می‌کند. با این حال، به جای تغییر مستقیم شی state، از متد Object.assign() برای ایجاد یک شی جدید استفاده می کند که حالت قبلی را با ویژگی count اصلاح شده کپی می کند. این رویکرد به DOM مجازی React اجازه می‌دهد تا زمانی که تشخیص می‌دهد که وضعیت را به‌روزرسانی کرده‌اید، مؤلفه را دوباره رندر کند.
همچنین می‌توانید از یک کتابخانه مدیریت دولتی مانند Redux و API متنی داخلی برای پیاده‌سازی این تکنیک استفاده کنید.
3. پیاده سازی سیستم نظارت بر عملکرد
سیستم‌های نظارت بر عملکرد برنامه‌های تلفن همراه (PMS) ابزارهایی هستند که به شما امکان می‌دهند عملکرد برنامه‌های تلفن همراه خود را اندازه‌گیری و تجزیه و تحلیل کنید. آنها ویژگی هایی مانند نظارت در زمان واقعی، گزارش خرابی، نظارت بر شبکه، معیارهای عملکرد و پخش مجدد جلسه کاربر را ارائه می دهند. استفاده از یک سیستم نظارت بر عملکرد با برنامه React Native به شما این امکان را می‌دهد که گلوگاه‌های عملکرد را شناسایی کنید تا برنامه خود را اصلاح و مقیاس کنید.
در اینجا لیستی از چندین ابزار PMC موجود است.
- React Native Debugger: یک برنامه مستقل که به شما امکان می دهد وضعیت برنامه React Native خود را اشکال زدایی و بررسی کنید. همچنین شامل یک مانیتور عملکرد برای کمک به شناسایی و رفع مشکلات عملکرد می باشد.
- React Native Profiler: این ابزار داخلی نظارت بر عملکرد به شما این امکان را می دهد که عملکرد برنامه خود را با اندازه گیری زمان رندر کردن هر جزء تماشا کنید.
- Flipper: یک پلتفرم توسعه اپلیکیشن موبایل با مانیتور عملکرد که می تواند به شما در شناسایی و رفع مشکلات عملکرد کمک کند.
- Firebase Performance Monitoring: یک ابزار نظارت بر عملکرد ارائه شده توسط Firebase که به شما امکان می دهد عملکرد برنامه خود را در دستگاه ها و پلتفرم های مختلف ردیابی کنید.
4. بیانیه های Console.log را حذف کنید
هنگامی که یک دستور console.log اجرا می شود، پیامی به موتور جاوا اسکریپت ارسال می کند تا پیام را به کنسول وارد کند. سپس موتور JS برای پردازش و نمایش پیام زمان می برد.
بیانیه های کنسول بیش از حد در کد شما، اجرای آن را کند می کند و باعث تاخیر در عملکرد می شود. این می تواند به ویژه هنگامی که برنامه شما روی دستگاهی با منابع محدود اجرا می شود، مانند یک دستگاه تلفن همراه ارزان قیمت، مشکل ساز شود.
5. یک سیستم ناوبری کارآمد بسازید
یک سیستم ناوبری خوب ساختار کلی برنامه React Native شما را بهبود می‌بخشد و نگهداری، به‌روزرسانی ویژگی‌ها و انتقال داده‌های وضعیت را به طور موثر آسان‌تر می‌کند. علاوه بر این، جابجایی بین چند نمایشگر در برنامه شما را بسیار آسان‌تر می‌کند و تجربه کاربر را بهبود می‌بخشد.
شما باید عواملی مانند الگوی ناوبری مناسب (بر اساس برگه، پشته، بر اساس کشو و غیره) را متناسب با برنامه خود در نظر بگیرید. تعداد صفحه‌هایی را که در برنامه خود انتظار دارید و نحوه انتقال داده‌های حالت بین آنها را در نظر بگیرید.
ذخیره سازی یک روش مفید برای توسعه یک سیستم ناوبری قابل اعتماد است. ذخیره سازی به شما این امکان را می دهد که وضعیت یک صفحه یا مؤلفه را هنگامی که کاربر آن را ترک می کند، ذخیره کنید و پس از بازگشت آن را بازیابی کنید. این کمک می کند تا میزان داده ای را که باید بارگیری کنید و تعداد دفعاتی که نیاز به رندر مجدد دارید به حداقل برسانید.
React Native چندین کتابخانه برای مسیریابی در دسترس دارد، مانند React Navigation و React Native Navigation. می توانید از آنها برای پیاده سازی برخی از این الگوهای ناوبری رایج در برنامه خود استفاده کنید.
6. اندازه برنامه را با تقسیم کد و بارگذاری تنبل کاهش دهید
اندازه برنامه برای عملکرد بهینه مهم است زیرا می تواند بر جنبه های تجربه کاربر مانند زمان بارگذاری اولیه، استفاده از حافظه و فضای ذخیره سازی تأثیر بگذارد.
تقسیم کد و بارگذاری تنبل تکنیک هایی هستند که می توانند اندازه برنامه React Native شما را کاهش دهند و عملکرد را بهبود بخشند.
تقسیم کد فرآیندی است که در آن یک پایگاه کد بزرگ جاوا اسکریپت به “بسته‌های” کوچکتر و قابل مدیریت‌تر تقسیم می‌شود. این می تواند زمان بارگذاری اولیه برنامه را به میزان قابل توجهی کاهش دهد.
بارگذاری تنبل تکنیکی است که به شما این امکان را می‌دهد تا هنگام راه‌اندازی کامپوننت‌ها را در زمانی که کاربر به سمت آنها هدایت می‌کند، بارگذاری کنید. این می تواند به کاهش میزان حافظه استفاده شده از برنامه شما و بهبود عملکرد کلی کمک کند.
چرا بهینه سازی عملکرد مهم است
بهینه سازی عملکرد برای موفقیت هر اپلیکیشن موبایلی بسیار مهم است. یک برنامه کند می تواند منجر به تجربه کاربری ضعیف شود و در نهایت منجر به تعامل و حفظ کم شود.
این ترفندها تنها چند راه هستند که می توانید از آنها برای اطمینان از تجربه لذت بخش برای پایگاه کاربر برنامه خود استفاده کنید.