قبل از اینکه Redux برنامه شما را نابود کند آن را بهینه کنید

اول از همه ، اجازه دهید نگاهی به نحوه عملکرد یک برنامه React-Redux بیندازیم. آنچه Redux در داخل برنامه انجام می‌دهد ، حافظه‌ای ( store ) را برای state برنامه ما و راه‌های برقراری ارتباط با آن حافظه را در اختیار ما قرار می‌دهد. یکی از این راهها تابع ()connect است. پس از فراخوانی ()connect روی یک کامپوننت سفارشی ، یک بسته‌بندی  ( wrapper )را دریافت می‌کنید که state را از store به وسیله props به کامپوننت خود منتقل می‌کند. این با استفاده از تابع () MapStateToProps انجام می‌شود که با هر تغییر  stateتابع فراخوانی می‌شود.

بعد از اینکه MapStateToProps () ، propها را  محاسبه می‌کند ، propهای جدید در مقایسه با نمونه های قدیمی سطحی‌تر هستند و اگر تفاوت داشته باشند ، کامپوننت دوباره رندر می‌شود. از این عملگر (===) برای مقایسه propها استفاده می شود.

React و Redux به خوبی از یکدیگر تعریف می‌شوند. React Component به store Redux مرتبط می‌شود و به همین دلیل وقتی state (state  (Redux تغییر می‌کند کامپوننت فرزند دوباره تغییر می‌کند. بنابراین هر کامپوننتی که هنگام تغییر state به Redux مرتبط باشد ، مجدداً رندر می‌شود ( به جز زمانی که نخواهیم این اتفاق بی‌افتد ).

این یک دلیل مهم است که برای بهینه سازی برنامه‌های React Redux که جلوگیری کند از رندر دوباره قسمت‌هایی که نمی‌خواهیم رندر شود.

برای جلوگیری از بروز چنین مشکلاتی ، روش های خاصی وجود دارد که در زیر توضیح داده شده است.

دوره آموزشی Redux  در سایت راکت

1. استفاده از pure component های React ، React shallow propهای قبلی و propهای فعلی را با یکدیگر مقایسه کرده و در صورت عدم تغییر از رندر مجدد جلوگیری کنید.
2. با استفاده از چرخه عمر shouldComponentUpdate می‌توانیم به طور انتخابی از رندر مجدد یک مولفه React جلوگیری کنیم.
3. استفاده از functional components وقتی از state داخلی استفاده نمی شود.

این می تواند در جلوگیری از رندر مجدد کمک کند تا زمانی که تغییری در propها ایجاد شود که توسط کامپوننت استفاده می‌شود.

برای رفع این مشکل ، ما مجدداً کتابخانه‌ای را انتخاب کرده‌ایم که در این مورد درست عمل می‌کند.

مفهموم Reselect

انتخابگرها می توانند داده های مشتق شده را محاسبه کنند و به Redux امکان می‌دهند حداقل state ممکن را ذخیره کند . که می‌تواند به عنوان کم‌ترین مقدار ممکن در نظر گرفته شود. داده‌های مشتق شده را از طریق انتخاب کنندگان محاسبه کنید.

انتخابگرها کارآمد هستند. انتخاب کننده تغییر نمی‌یابد ، مگر اینکه یکی از استدلال هایش تغییر کند.

منبع