بهینه سازی ری اکت React Performance (ویژگی های جدید ری اکت 16.6)

یکی از بزرگترین دغدغه های برنامه نویس ها و مدیران پروژه، سرعت مطلوب اجرای برنامه بر روی دستگاه های مختلف می باشد. در اصل Performance انتگرال UX است. کتابخونه ری اکت به علت وجود Virtual DOM و الگوریتم reconciliation با پیچیدگی زمانی (O(n سرعت خیلی خوبی دارد. هر چند بعضی مواقع ممکن است این سرعت خیلی خوب رو خیلی بیشتر کنیم.

قبل از شروع به خواندن این نوشته حتما مقاله زیر را مطالعه کنید:

داخل این مقاله و ویدیو ویژگی های نسخه React 16.6 رو بررسی می کنیم و با متدهای shouldComponentUpdate و memo و کلاس PureComponent از رندر شدن اضافی کامپوننت ها جلو گیری می کنیم. (داخل نسخه React 16.6 برای استفاده از Context Api یک روش جدید در کامپوننت ها معرفی شده است که داخل این ویدیو به این ویژگی اشاره ای نشده است.)
از Eslint و Babel صحبت می کنیم و درک می کنیم چرا باید به class کامپوننت ها نه بگوییم !
و برای Optimize کردن پلاگین React Developer Tools رو نصب می کنیم و ویژگی های اونو بررسی می کنیم

در صورت تمایل می توانید پس از مطالعه این نوشته مقاله زیر را مطالعه کنید:

اگر هنوز با Context Api آشنا نیستید پیشنهاد میشه این مقاله رو مطالعه کنید:

در ادامه به معرفی کامپوننت Suspense و کار با متد جدید React.lazy برای Code Splitting می پردازیم. برنامه ای که نوشتیم رو با hook ها Refactor می کنیم تا از ساده تر بشه.
اگر هنوز با Hook آشنا نیستید پیشنهاد میشه این مقاله رو مطالعه کنید (حتما بخونید):

در ادامه مقاله قبلی از هوک useCallback و کاربرد اون صحبت می کنیم.

برای استفاده از Concurrent Mode و حداکثر کردن Performance کامپوننت Strict Mode رو معرفی می کنیم و Life Cycle های Deprecated شده

1. Component Will Mount
2. Component Will Update
3. Component Will Receive Props

را از پروژه حذف کرده و با لایف سایکل جدید getDerivedStateFromProps کار می کنیم. و در آخر جمع بندی می کنیم و نتیجه میگیریم این آخرِ داستان Performance نیست و فقط نقطه شروعش هستش. (و درباره آینده Suspense یکم صحبت می کنیم)

لینک مستقیم آپارات: https://www.aparat.com/v/R1qJk

داخل ویدیو اشاره ایی به SSR نکردم ولی یکی از عوامل بالابردن Performance استفاده از SSR هستش که داخل این نوشته بیشتر اشاره کردم بهش:

لینک های مفید:

امیدوارم این آموزش مفید واقع شده باشه.
خوشحال میشم نظرتون رو درباره React 16.6 و نحوه تدریس بشنوم :)