جلوگیری از re-render شدن پروژه های ساخته شده با React

shahryarjb · فوریه 27, 2023, 5:41ب.ظ

درود خدمت دوستان من اخیرا یک مطلب خوبی در زمینه جلوگیری از re-render های غیر ضروری reactjs ترجمه کردم که واقعا مطلب خوبی هست و هم از هوک های خود این کتابخانه پرطرفدار استفاده می کنه و هم اینکه یک سری پترن ارائه می ده تا مشکلات به مرور حل بشه همراه اون ویدیو نیز وجود دارد و همچنین سمپل کد

دسترسی به اون

github.com

shahryarjb/LearnJsStuff/blob/master/Contents/react-re-renders-guide.md

# نقشه راه جلوگیری از re-render در React

- https://www.developerway.com/posts/react-re-renders-guide
- https://beta.reactjs.org/learn/preserving-and-resetting-state
- https://www.developerway.com/posts/how-to-write-performant-react-apps-with-context
- https://github.com/welldone-software/why-did-you-render

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

زمانی که می خواهیم در مورد عملکرد React صحبت کنیم، دو مرحله اصلی وجود دارد که باید به آنها اهمیت بدیم:

- `رندر اولیه` - زمانی اتفاق می افتد که یک مؤلفه برای اولین بار روی صفحه ظاهر می شود
- `دوباره رندر شدن` - هر رندر متوالی از یک مؤلفه که قبلاً روی صفحه ظاهر شده است


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

> برنامه‌های غیرتعاملی که هیچ به‌روزرسانی داده ناهمزمانی ندارند، هرگز دوباره رندر نمی‌شوند و بنابراین نیازی به بهینه‌سازی عملکرد رندر مجدد ندارند.

This file has been truncated. show original