انواع روش ها برای بهبود کارایی اپلیکیشن های ری اکت جی اس(React.js)قسمت اول

کتابخانه ری اکت (ReactJS)بی نظیر است برای تمام نواقص و مشکلات احتمالی یک راه حل بهینه دارد که در این مقاله میخواهم 5 روش برای بهبود کارایی و سرعت اپلیکشین های React.js را به صورت موردی مطرح کنم و در قسمت دوم موارد بعدی را بررسی کنم

1.React.memo

اگر با React.PureComponent آشنا باشید، در این صورت React.memo برای شما کاملاً سرراست خواهد بود، زیرا کاملاً مشابه React.PureComponent است. ما از React.PureComponent با کامپوننت کلاس استفاده می‌کنیم، اما React.memo به همراه کامپوننت‌های تابع عمل می‌کند.

const App = () => {
   const [count1, setCount1] = React.useState(0)
   const [count2, setCount2] = React.useState(0)

   const increaseCounter1 = () => {
      setCount1(count1 => count1 + 1)
   }

   return (
      <>
         <button ={increaseCounter1}>Increase counter 1</button>
         <Counter value={count1}>Counter 1</Counter>
         <Counter value={count2}>Coutner 2</Counter>
      </>
   )
}
const Counter = ({value, children}) => {
   console.log('Render: ', children)

   return (
      <div>
         {children}: {value}
      </div>
   )
}


export default Counter

هر بار که کاربر روی دکمه کلیک می‌کند، حالت count1 تغییر می‌یابد و موجب می‌شود که اپلیکیشن هر دو شمارنده را رندر مجدد کند که این رندرها به عنوان «رندر مجدد غیرضروری» شناخته می‌شوند. با این حال، ما صرفاً انتظار داریم که counter1 رندر مجدد شود، چون هیچ چیزی در مورد counter2 تغییر نخواهد یافت. در عمل، هر دو شمارنده رندر مجدد می‌شوند.

چگونه می‌توانیم این مشکل را رفع کنیم؟ پاسخ در React.memo است. تنها چیزی که نیاز داریم این است که کامپوننت شمارنده را درون React.memo قرار دهیم.

const Counter = ({value, children}) => {
   console.log('Render: ', children)

   return (
      <div>
         {children}: {value}
      </div>
   )
}

export default React.memo(Counter)

ری اکت ممو(React.memo)به صورت پیش‌فرض همه props ارسالی به کامپوننت را از طریق referential equality مقایسه می‌کند. اگر این props تغییری نیافته باشند، React.memo از آخرین نتیجه رندر مجدد شده استفاده می‌کند و از این رو از رندر شدن مجدد کامپوننت جلوگیری می‌کند.

2.use.Memo

یکی از هوک های ریکت (React Hook) می باشد که برای کار با کش (cache) در اپلیکیشن های ری اکت بکار می رود.توضیح خود را با بیان تعریف از مستندات رسمی آغاز می‌کنیم. useMemo یک مقدار «درون حافظه‌ای» (memoized) بازگشت می‌دهد.

React.useMemo(() => {
  fooFunction()
}, [dependencies])

const App = () => {
   const fooFunction = () => {
      return 'Foo is just Food without D'
   }

   const useMemoResult = React.useMemo(fooFunction, [])

   console.log('useMemoResult: ', useMemoResult)

   return <p>Foo is just food without D</p>
}

یوز ممو (React.useMemo) اقدام به فراخوانی fooFunction می‌کند و نتیجه‌اش را بازگشت می‌دهد

3.React.PureComponent

یک کلاس کامپوننت base است که تمام فیلدهای state و props را چک می کند و در صورتی که تغییر پیدا کنند کامپوننت آپدیت خواهد شد. در غیر اینصورت رندر نخواهد شد.

درست مانند کاری که متد shouldComponentUpdate در کلاس کامپوننت انجام می دهد، React.PureComponent نیز همینکار را می کند.

4.shouldComponentUpdate

به طور پیش فرض این متد پیاده سازی شده نیست، پس هر تغییر توی props یا states باعث میشه کامپوننت re-render بشه، هنگامی که کامپوننت تصمیم به تغییر یا بروزرسانی DOM را دارد،این متد فراخوانی می شود.

این متد به ما اجازه می دهد تا رفتار کامپوننت را در بروزرسانی آن کنترل کنیم.بدین صورت که اگر این متد مقدار true را بازگرداند،کامپوننت بروزرسانی خواهد شد،در غیر اینصورت از بروزرسانی کامپوننت صرف نظر خواهد کرد.

در shouldComponentUpdate نمیتونیم از setState استفاده کنیم.

5.استفاده از سلکتورهای reselect

ریداکس به شکل immutable کار می کند, به این معنی که با هر بار dispatch شدن action رفرنس های جدیدی از آبجکت تعریف می شود. این قضیه باعث کاهش بهره وری و کارایی نرم افزار خواهد شد. زیرا حتی اگر رفرنس آبجکت تغییر کند، کامپوننت re-render می شود. با اینکه فیلدهای آبجکت تغییر نکرده اند.

لایبرری Reselect state ریداکس را کپسوله سازی یا encapsulate می کند و چک خواهد کرد که هر زمان مقدار فیلدهای آبجکت state تغییر کرد کامپوننت مجددا رندر شود.

بنابراین reselect باعث می شود در زمان اجرای اپلیکیشن صرفه جویی شود. به این صورت که مقدار state قبل و بعد را چک می کند و اگر تغییر پیدا کرده بود کامپوننت re-render خواهد شد. وگرنه با تغییر رفرنس آبجکت state کامپوننت رندر نخواهد شد.

قسمت دوم https://vrgl.ir/6JNq3