بهینه سازی عملکرد React با Memoization و تقسیم کد

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

چرا عملکرد مهم است

برنامه های وب مدرن می توانند پیچیده و مؤلفه باشند. بدون بهینه سازی ، مجدداً غیر ضروری و اندازه بسته های بزرگ می تواند UI شما را کند کرده و بر تجربه کاربر تأثیر منفی بگذارد. بیایید آن را برطرف کنیم.

1. استفاده از React.memo برای جلوگیری از بازپرداختهای غیر ضروری

React.memo یک مؤلفه مرتبه بالاتر است که در صورت عدم تغییر غرفه ها ، از بازگرداندن مجدد جلوگیری می کند.

const ExpensiveComponent = React.memo(({ data }) => {
  console.log("Rendering ExpensiveComponent");
  return 
{data}
;
});

با بسته بندی مؤلفه خود React.memo، شما با جلوگیری از محاسبات غیر ضروری ، منابع را ذخیره می کنید.

2. توابع یادآوری با useCallback

هنگامی که شما توابع را به مؤلفه های کودک منتقل می کنید ، آنها غالباً دوباره ارائه می دهند زیرا توابع در هر رندر بازسازی می شوند. useCallback اصلاح می کند که:

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

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

3. مقادیر یادآوری با useMemo

استفاده کردن useMemo برای ذخیره نتیجه محاسبات گران قیمت:

const computedValue = useMemo(() => {
  return expensiveFunction(input);
}, [input]);

این برای تحولات داده یا فیلتر که نیازی به اجرای هر رندر نیست ، مفید است.

4. تقسیم کد با React.lazy وت Suspense

تقسیم کد بسته نرم افزاری شما را به قطعات کوچکتر می شکند و آنها را در صورت تقاضا بارگذاری می کند. این به طرز چشمگیری زمان بار اولیه را بهبود می بخشد.

const LazyComponent = React.lazy(() => import('./HeavyComponent'));

function App() {
  return (
    Loading...