یک کامپوننت ریکتی زمانی rerender (تازه سازی) میشه که state یا prop (پراپرتی) هاش تغیر کنن و همچنین در نظر داشته باشید که فرزندها هم هنگام تازه سازی کامپوننت پدر تازه سازی میشن پس در نتیجه تغیر یک استیت یا پراپ میتونه برامون گرون تموم بشه اگر کامپوننت پدر شامل تعداد زیادی فرزند دارای تعداد زیادی فرزند باشه که هرکدوم تعداد زیادی المنت رو برمیگردونن یا ...
برای بررسی عملی این موضوع خیلی سریع یک پروژه ریکت میسازیم
البته شما میتونید نسازید و فقط آموزش رو دنبال کنید
صد البته اگرم از جریان تازه سازی شدن کامپوننت فرزند همراه با کامپوننت پدر سر در میارید یکراست به قسمت برطرف کردن مشکل و راهنمای مصرف برید
بسیار عالی حالا پروژه رو با visual studio code باز میکنیم و کامپوننت Image.jsx رو با محتوای زیر میسازیم
اگر شما کامپوننت هارو به صورت کلاسی هم بنویسید هیچ اشکالی نداره
با این اوصاف به اضای هر بار رندر شدن این کامپوننت یک دفعه عبارت rendering this component توی پنجره کنسول مرورگر نوشته میشه
حالا نیاز داریم که کامپوننت Image رو جایی فراخوانی کنیم؛ پس به سراغ App.js میریم و تغیرات زیر رو اعمال میکنیم
خب این کامپوننت نقش یک سایت دانلودی رو برامون بازی میکنه و صد البته برای پیشبرد مثالمون یک استیت به اسم count داره که با هربار کلیک روی لینکمون یکی به مقدارش اضافه میشه. پس با هربار تغیر در استیت، این کامپوننت یکبار رندر میشه
خب بیاین باهم این پروژه رو تست کنیم و به نتیجه های جالب برسیم:
خب همونطور که انتظار میرفت بعد رندر شدن کامپوننت Image پیغامی که تنظیم کرده بودیم توی پنجره کنسول قابل دیدن هست.
حالا بیاین (گول بخوریم و) روی لینک پایین صفحه کلیک کنیم تا یکی به مقدار استیت count اضافه بشه
میبینید که با هربار کلیک روی لینک نه تنها (چندتا تبلیغ بهمون نشون میده) کامپوننت والد (App) دوباره رندر میشه و عبارت I just showed you some adds رو مینویسه بلکه کامپوننت فرزند (Image) رو هم یکبار دیگه رندر میکنه (چون همونطور که توی قسمت قبل دیدیم با هر بار رندر شدنش عبارت rendering this component نوشته میشه)
به کامپوننت فرزند برید و فانکشن memo رو از پکیج react واکشی کنید
import { memo } from 'react';
و حالا به اصطلاح این فانکشن memo رو دور کامپوننت میپیچیم:
دادام.. حالا دیگه با همین کار ساده از rerender شدن کامپوننت فرزند همراه با والدش جلوگیری میکنیم
درحقیقت فانکشن memo تظمین میکنه که کامپوننتمون فقط با تغیر پراپرتیش دوباره رندر بشه
خب پس حالا که به این راحتیاس بریم و همه ی کامپوننت هامون رو توی فانکشن ممو بپیچیم دیگه؟ نخیر! ممو ی عزیز هم از نظر پرفرمنسی برای خودش جایگاهی داره و اگر کامپوننتمون قرار نباشه کار نسبتا سنگینی انجام بده نه تنها استفاده از ممو کار بیهوده ای هست بلکه باری رو هم از نظر پرفرمنسی روی دوش سایتمون میزاره. پس در نتیجه باید از ممو با احتیاط و تحت شرایط زیر استفاده بشه
منبع: کتاب Asp.net Core 3 and React از انتشارات فوق العاده Packt
مطالعه ی عمیق تر موضوع:
