در این مقاله قرار است روش صحیح استفاده useCallback و useMemo را بیاموزید.
اگر توسعه دهنده ری‌اکت هستید، پس تا انتهای مطلب با ما همراه باشید تا یک راهنمای کامل در مورد هوک‌های ری‌اکت را با شما به اشتراک بگذاریم. در آخرین نسخه ری‌اکت دو هوک داخلی به عنوان ویژگی جدید برای بهینه‌سازی عملکرد معرفی شده است.
بسیاری از برنامه نویسان ری‌اکت ممکن است تفاوت بین useCallback و useMemo را ندانند و از این دو انتظار تابع داشته باشند. اگر دچار سردرگمی شده‌اید اصلا نگران نباشید. در ادامه سعی داریم بهترین و دقیق‌ترین نکات را بیان کنیم. امیدوارم راه حل‌های خود را در اینجا پیدا کنید.
پس بدون معطلی بیایید شروع کنیم.
Hook چیست؟
هوک یک ویژگی جدید است که در React 16.8 معرفی شد و باعث سهولت کار با ری‌اکت و همچنین سریع‌تر شدن کدنویسی می‌شود. هوک در واقع اجازه می‌دهد تا از useState و سایر ویژگی‌های ری‌اکت بدون نوشتن یک کلاس واحد استفاده کنید. به عبارت دیگر هوک‌ها متدها و توابعی هستند که می‌توانند به ویژگی‌های state و چرخه حیات ری‌اکت متصل شوند.
useCallback چیست؟
هوک useCallback زمانی استفاده می‌شود که یک کامپوننت فرزند بارها و بارها مجددا رندر شود.
اما هدف استفاده از آن چیست؟
با استفاده از useCallback می‌توانید از رندر مجدد و غیرضروری کامپوننت‌ها از طریق بازگرداندن همان نمونه تابعی که به جای ایجاد یک تابع جدید هر بار ارسال می‌شود، جلوگیری کنید.
بنابراین بهره‌گیری از هوک‌های useCallback زمانی مفید است که یک کامپوننت فرزند بدون ضرورت استفاده مجددا رندر می‌شود.
ارسال آرایه‌ای از وابستگی‌ها منجر به یک نسخه ذخیره شده از فراخوانی می‌گردد و تنها زمانی تغییر می‌کند که وابستگی تغییر کند.
سینتکس useCallback:
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);useMemo چیست؟
هوک useMemo در کامپوننت تابعی ری‌اکت برای برگرداندن یک مقدار ذخیره شده استفاده می‌شود.
هدف استفاده از آن چیست؟
در علوم کامپیوتر، Memoization مفهومی است که به طور کلی زمانی استفاده می‌شود که بتوانیم با برگرداندن نتیجه ذخیره شده در زمان کامپایل مجدد صرفه‌جویی کنیم. در کامپوننت‌های تابعی ری‌اکت، هوک‌های useMemo مقادیر نگاشت حافظه را ارائه می‌دهند.
استفاده از useMemo زمانی که پردازش بسیار کمی درگیر است واقعا عاقلانه نیست. زیرا در مواردی که پردازش بسیار کمی وجود دارد، استفاده از آن می‌تواند سربار اضافی ایجاد کند. با این حال useMemo به خوبی کار می‌کند تا از رندر اضافی و غیرضروری جلوگیری شود.
اکنون احتمالا از خود می‌پرسید که Memoization در ری‌اکت چیست و چه کاربردی دارد.
Memoization یا حافظه‌سپاری به مفهوم عدم کامپایل مجدد یک تابع با همان آرگومان برای اجرای بعدی اشاره دارد، زیرا دفعه بعد که فراخوانی می‌شود نتیجه ذخیره شده در حافظه کش را برمی‌گرداند.
در این مرحله باید درک بهتر و واضح‌تری از هوک‌های useCallback و useMemo داشته باشید، همچنین هدف و موارد استفاده از هر یک را نیز بدانید. حالا بیایید با موضوع بعدی بحث پیش برویم.
در نگاه اول ممکن است به نظر برسد موارد استفاده از useCallback و useMemo کاملا مشابه هستند، اما در حقیقت اینطور نیست. بنابراین احتمال زیادی برای سردرگمی در مورد زمان استفاده از این دو وجود دارد.
پس برای از بین بردن علامت سوال‌ها در مورد useCallback و useMemo، بیایید نگاهی به تفاوت بین هر دو هوک بیندازیم.
سینتکس useMemo:
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
تفاوت بین useMemo و useCallback
هم useMemo و هم useCallback یک تابع و یک آرایه از وابستگی‌ها را می‌پذیرند. اما تفاوت عمده بین این دو در این است که useCallback مقدار بازگشتی را به حافظه می‌سپارد، در حالی که useMemo تابع را حفظ می‌کند. اساسا تنها تفاوت بین این هوک‌ها این است که یکی نوع مقدار را در حافظه نگه می‌دارد و دیگری تابع را در حافظه ذخیره می‌کند.
به عنوان مثال اگر کد محاسبات آرگومان‌ها را می‌پذیرد و مقداری را برمی‌گرداند، باید از useMemo استفاده کنید تا بتوانید به ارجاع آن مقدار بین رندرها بدون اجرای مجدد کدهای محاسباتی ادامه دهید.
از سوی دیگر به منظور این‌که یک نمونه تابع برای رندرهای متعدد پایدار بماند، useCallback مورد نیاز است. این امر مانند قرار دادن یک تابع خارج از محدوده کامپوننت ری‌اکت است تا آن را دست نخورده نگه دارد.
آرایه وابستگی چگونه با این هوک‌ها کار می‌کند؟
اگر از useEffect استفاده کرده باشید، احتمالا با آرایه وابستگی آشنا هستید. با این حال اگر هم با این اصطلاح آشنایی ندارید، نگران نباشید. در ادامه توضیح خواهیم داد که useEffect به چه معناست.
useEffect چیست؟
هوک useEffect (callback, dependencies) برای رسیدگی به اثرات جانبی در کامپوننت‌های تابعی یا همان فانکشنال کامپوننت‌ها استفاده می‌گردد. آرگومان callback منطقی است که باید به کار گرفته شود. dependencies هم لیستی از وابستگی‌های اثر جانبی است (propها یا مقادیر state).
با استفاده از این هوک به ری‌اکت می‌گویید که کامپوننت شما باید بعد از رندر شدن عملی را انجام دهد. هنگامی که DOM به روز شود، افکتی را که شما ارسال می‌کنید ذخیره می‌کند که آن را effect می‌نامیم. همچنین می‌توانیم واکشی داده‌ها را انجام دهیم یا برای دستیابی به این نتیجه و همچنین تنظیم عنوان داکیومنت، API ضروری دیگری را فراخوانی کنیم.
سینتکس useEffect:
useEffect(() => {
const subscription = props.source.subscribe();
return () => {
// Clean up the subscription
subscription.unsubscribe();
};
});اکنون بیایید به نحوه عملکرد آرایه وابستگی با این هوک‌ها بپردازیم.
متدهای useCallback، useMemo و useEffect روش‌هایی برای افزایش عملکرد بین رندر مجدد کامپوننت‌ها در برنامه‌های مبتنی بر ری‌اکت هستند.
این توابع برخی از ویژگی‌های ارائه شده توسط کامپوننت‌های مبتنی بر کلاس را کنترل می‌کنند، مانند تداوم stateهای اختصاص داده شده از طریق فراخوانی‌های رندر و ظاهر کامپوننت‌ها در مراحل مختلف چرخه حیات آن‌ها.
در اصل شما آرایه‌ای از مقادیر یا متغیرها را در داخل تابعی که به هوک ارائه میدهید، ایجاد می‌کنید.
امیدوارم این توضیحات مختصر برایتان مفید بوده باشد. اگر هرگونه سوالی دارید در بخش نظرات زیر برای ما ارسال کنید، خوشحال می‌شویم که بتوانیم به آن‌ها پاسخ دهیم.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید