Microfrontend.ir

بهینه سازی React با useCallback Hook

در این ویدیو بهینه سازی React با useCallback Hook و memo را بررسی کردیم. پس از تغییر مقادیر state کامپوننت مجددا رندر می شود. این رندر مجدد حتی زمانی که مقادیر ورودی تغییری نکرده است اتفاق می افتد که اضافی به نظر می آید. React از طریق تابع memo به برنامه نویس این امکان را می دهد که کامپوننت و مقادیر ورودی را کش کرده و در صورتی که مقادیر یکسان است از تکرار رندر جلوگیری کند. تابع Object.is مکانیزم اصلی ری‌اکت برای مقایسه است. اگر از تابع به عنوان props استفاده کنیم و این تابع در بدنه کامپوننت تعریف شده باشد بدلیل اینکه هر بار از نو اعلان می‌شود memo هم نمیتواند مشکل مارا حل کند. برای اینکه اعلان تابع را نیز کش کنیم که هر بار از نو اعلان نشود میتوانیم از useCallback Hook استفاده کنیم.

Video: https://youtu.be/msuJAbqDXy8

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsByPAaNxIYX26M3ZpWkSzVz-

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

❤2🔥2👍1

www.tgoop.com/microfrontend_ir/169

669 viewsAug 13, 2023 at 16:45

بهینه سازی React با useCallback Hook

در این ویدیو بهینه سازی React با useCallback Hook و memo را بررسی کردیم. پس از تغییر مقادیر state کامپوننت مجددا رندر می شود. این رندر مجدد حتی زمانی که مقادیر ورودی تغییری نکرده است اتفاق می افتد که اضافی به نظر می آید. React از طریق تابع memo به برنامه نویس این امکان را می دهد که کامپوننت و مقادیر ورودی را کش کرده و در صورتی که مقادیر یکسان است از تکرار رندر جلوگیری کند. تابع Object.is مکانیزم اصلی ری‌اکت برای مقایسه است. اگر از تابع به عنوان props استفاده کنیم و این تابع در بدنه کامپوننت تعریف شده باشد بدلیل اینکه هر بار از نو اعلان می‌شود memo هم نمیتواند مشکل مارا حل کند. برای اینکه اعلان تابع را نیز کش کنیم که هر بار از نو اعلان نشود میتوانیم از useCallback Hook استفاده کنیم.

Video: https://youtu.be/msuJAbqDXy8

playlist: https://www.youtube.com/playlist?list=PLJ9zDGwhhsByPAaNxIYX26M3ZpWkSzVz-

〰️〰️〰️〰️〰️〰️
© | @microfrontend_ir

BY Microfrontend.ir