در دنیای دیجیتال پر سرعت امروز ، کاربران انتظار دارند که برنامه های وب رعد و برق و پاسخگو باشند. به عنوان توسعه دهندگان React ، این وظیفه ماست که اطمینان حاصل کنیم که برنامه های ما نه تنها عالی به نظر می رسند بلکه به طور کارآمد نیز عملکرد دارند. در این وبلاگ ، من به اشتراک می گذارم 5 روش اثبات شده برای بهینه سازی عملکرد React و ارائه تجربیات سریعتر و نرم تر کاربر.
## چرا بهینه سازی عملکرد اهمیت دارد
بهینه سازی عملکرد فقط مربوط به سریعتر کردن برنامه شما نیست – این مربوط به بهبود رضایت کاربر ، کاهش نرخ گزاف گویی و تقویت تبدیل است. یک برنامه آهسته می تواند کاربران را ناامید کرده و آنها را دور کند ، در حالی که یک برنامه سریع آنها را درگیر می کند و برای اطلاعات بیشتر باز می گردد.
بیایید به تکنیک ها شیرجه بزنیم!
## 1. یادآوری با React.memo ()
Memoization تکنیکی است که برای ذخیره نتایج محاسبات گران قیمت استفاده می شود تا نیازی به محاسبه مجدد در هر رندر نباشد. در واکنش ، می توانید استفاده کنید React.memo() برای به یاد آوردن مؤلفه های عملکردی و جلوگیری از مجدداً غیرضروری.
مثال:
const MyComponent = React.memo(({ data }) => {
return
{data}
;
});
چه زمانی استفاده کنید:
وقتی یک مؤلفه بارها و بارها همان غرفه ها را دریافت می کند.
هنگام ارائه مجدد گران است (به عنوان مثال ، لیست های بزرگ یا UI پیچیده).
چه موقع از این کار جلوگیری کنید:
هنگامی که غرفه ها به طور مکرر تغییر می کنند.
هنگامی که این مؤلفه از قبل سبک است.
2. بارگذاری تنبل با React.Lazy () و تعلیق
بارگذاری تنبل به شما امکان می دهد تا در صورت نیاز ، قطعات را بارگیری کنید ، اندازه بسته اولیه و بهبود زمان بار را کاهش دهید. React با استفاده از React.Lazy () و تعلیق ، یک روش داخلی برای اجزای بار تنبل فراهم می کند.
مثال:
const lazycomponent = react.lazy (() => واردات ('./ lazycomponent')) ؛
function App() {
return (
}>
) ؛
}
مزایا:
زمان بار اولیه سریعتر.
عملکرد بهتر برای برنامه های در مقیاس بزرگ.
3. بهینه سازی مدیریت دولت
مدیریت نادرست دولت می تواند منجر به مجدداً غیرضروری و تنگناهای عملکرد شود. برای بهینه سازی مدیریت دولت:
برای مدیریت متمرکز دولت از ابزار Redux یا Zustand استفاده کنید.
از انتخاب کنندگان برای محاسبه کارآمد حالت مشتق شده استفاده کنید.
از استفاده بیش از حد از زمینه برای وضعیتی که مرتباً تغییر می کند خودداری کنید.
مثال با ابزار Redux:const selectFilteredData = (state) => {
return state.data.filter(item => item.isActive);
};
** 4. تقسیم کد با صفحه وب
** تقسیم کد تکنیکی است که به شما امکان می دهد کد خود را به تکه های کوچکتر تقسیم کنید ، که در صورت تقاضا بارگیری می شوند. این باعث کاهش اندازه بسته نرم افزاری اولیه و بهبود عملکرد می شود.
مثال:import(/* webpackChunkName: "myChunk" */ './MyComponent').then(module => {
const MyComponent = module.default;
// Use the component
});
ابزارها:
از @loadable/مؤلفه برای واردات پویا در React استفاده کنید.
5. با استفاده از قلاب های UseCallback () و usememo ()
قلاب های UseCallback () و Usememo () ابزاری قدرتمند برای بهینه سازی عملکرد با یادآوری توابع و مقادیر هستند.
مثال:
`const memoizedValue = usememo (() => computeexpencial (a ، b) ، [a, b]) ؛
const memoizedCallback = useCallback (() => {
dosomething (a ، b) ؛
} ، [a, b]) ؛ `
بهترین روشها:
برای محاسبات گران قیمت از usememo () استفاده کنید.
برای کارکردهایی که به عنوان غرفه به مؤلفه های کودک منتقل می شود ، از useCallback () استفاده کنید.
پایان
بهینه سازی عملکرد React یک فرایند در حال انجام است ، اما با اجرای این تکنیک ها می توانید سرعت و کارآیی برنامه های خود را به میزان قابل توجهی بهبود بخشید. به یاد داشته باشید ، بهینه سازی های کوچک می تواند منجر به دستاوردهای بزرگی در تجربه کاربر شود.
آیا در پروژه های خود هیچ یک از این تکنیک ها را امتحان کرده اید؟ در نظرات زیر به من اطلاع دهید! و اگر این وبلاگ را مفید دانستید ، احساس راحتی کنید که آن را با توسعه دهندگان خود به اشتراک بگذارید.
برنامه نویسی مبارک! 🚀
