https://virgool.ir/feed/@sinkooshafa2026-11-11 20:14:48https://files.virgool.ir/upload/users/130165/avatar/avatar.pnghttps://virgool.ir/@sinkooshahttps://virgool.ir/@sinkoosha/reactmemo-چیست-oy3p0jbz0lwmریکت memo در این مقاله قصد دارم به این موضوع رو بررسی کنم چه زمانی از react.memo استفاده کنیم و چگونه این قابلیت به پرفورمنس برنامه کمک می کنه در فانشنال کامپونت ها در ریکت قابلیتی وجود داره به نام react.memo ، کامپونت های ریکت به این صورت عمل می کنند که وقتی در داخل کامپونت استیت تغییر می کنه موجب ری رندر شدن آن کامپونت می شه ، حالا اگر در داخل کامپونتی که استیت آن تغییر می کنه کامپونت های فرزند هم داشته باشیم کامپونت های فرزند هم ری رندر می شهخب ، این فرایند در موارد غیر ضرروی (زمانی که پراپس های کامپونت فرزند تغییر نکنه )باعث کاهش پرفورمنس نرم افزار می شه ، این جاست که React.memo وارد عمل می شود const myComponent = (props) => {/* render using props */};export const MemoizedComponent = React.memo(myComponent);چه زمانی از react.memo استفاده می شه؟زمانی ما از این قابلیت استفاده می کنیم که ، با رندر مجدد تغییری در کامپونت فرزند ایجاد نشه ، به عبارت دیگر props های ورودی کامپونت فرزند تغییر نکنه ، و با استفاده از آن از ری رندر شدن غیر ضرروری کامپونت ها جلوگیری کنیم خب حالا که فهمیدم چه زمانی از این قابلیت استفاده کنیم بیایم در قالب یک مثال این موضوع را مورد بررسی کنیم https://gist.github.com/sinkoosha/eee7aac98af8ef63544c12bc4c3f336f خب ما در کامپونت app دو تا کامپونت داریم یکی countBox که طبیعیه ، بدلیل تغییر پراپس دوباره رندر بشه و یکی کامپونت profile که بدلیل ثابت بودن مقدار پراپس آن نباید تغییر کنهکامپونت countBox https://gist.github.com/sinkoosha/8544476e3a7e7fb5642502b3535e0b5f کامپونت profile https://gist.github.com/sinkoosha/544eb266eb2bf6ca2fe1892596ec0a3a خب اگه کنسول خود را در مرورگر باز کنید می بیند با هر بار کلیک کردن بر روی کانتر و اضافه شدن عدد آن کامپونت پروفایل هم ری رندر می شود که این امر غیر ضرروریه ، در ادامه بررسی می کنیم چگونه جلوی این فرایند را بگیرم و به پرفورمنس برنامه کمک کنیم ری رندر شدن پروفایل بعد از کلیک کردنخب بلاخره رسیدم به بحث شیرین react.memo https://gist.github.com/sinkoosha/fa912082f33eb61005970b586b22ff0c خب اگه الان سرچ کنسول را باز کنیم می بینیم که کامپونت پروفایل ری رندر نشده!!خب حالا بیایم مثال را یخورده تغییر بدیم کامپونت app.js https://gist.github.com/sinkoosha/0b022bb37bc0b5404134bd8a91d936ba ما در مثال قبل یک متغیر داشتیم به نام userName که نام یوزر داخل آن قرار داشت در اینجا اومدیم یک ابجکت تعریف کردیم به نام user و name را در آن قرار دادیم اگه دوباره روی دکمه AddCount کلیک کنیم می بینیم که دوباره کامپونت پروفایل ری رندر می شه !! دلیلش اینکه که ، react.memo فقط یک مقاسه سطحی بر روی مقادیر پراپس ها انجام میده ، برای حل این مشکل از آرگمان دوم React.Memo استفاده می کنیم نحوه استفاده از آن به این شکل هست https://gist.github.com/sinkoosha/4137882e2eff271e143d262e24086517 ما در آرگمان دوم react.memo مقایسه کردیم اگر مقادیر پراپس قبلی با مقدار فعلی برابر بود رندر نشود در غیر این صورت رندر شود در اخر باید این نکته را هم متذکر شده که همیشه نباید از این قابلیت استفاده کرد چون ممکن است نتیجه معکوس باشد این قابلیت فقط در Function component قابل استفاده و در class component ها باید از pure component ها استفاده کردsinakooshasinakooshaWed, 19 Apr 2023 10:58:23 +0330