نحوه کار با useMemo در React – با مثال کد
useMemo
یک ابزار ارزشمند در چارچوب React است که برای بهینه سازی عملکرد با به خاطر سپردن محاسبات گران قیمت طراحی شده است.
با useMemo
، React میتواند نتیجه فراخوانی تابع را ذخیره کند و زمانی که وابستگیهای آن تابع تغییر نکرده است، به جای محاسبه مجدد مقدار در هر رندر، از آن استفاده مجدد کند.
useMemo
به عنوان یک ابزار قدرتمند برای بهینه سازی عملکرد بدون به خطر انداختن خوانایی یا قابلیت نگهداری کد برجسته می شود. اما اغلب توسط مبتدیان نادیده گرفته می شود یا به اشتباه درک می شود.
در این راهنمای جامع، در مورد اینکه useMemo
چیست، چگونه کار میکند و چرا یک ابزار ضروری برای هر توسعهدهنده React است، بحث خواهیم کرد.
فهرست مطالب
چه زمانی از useMemo استفاده کنیم؟
- قالب بندی داده ها
- فیلتر کردن داده ها
- مرتب سازی داده ها
- یادداشت کردن توابع پاسخ به تماس
- محاسبات گران قیمت
مزایای استفاده از Memo
نحو و استفاده از useMemo Hook
- اجتناب از محاسبات مجدد غیر ضروری
- بهینه سازی عملکرد رندرینگ
- مدیریت کارآمد داده های مشتق شده
- افزایش تجربه کاربری
useMemo چه تفاوتی با سایر هوک ها مانند useState و useEffect دارد؟
– useState
– useEffect
– useMemo
نحوه به خاطر سپردن محاسبات گران قیمت با استفاده از useMemo
- محاسبات گران قیمت را شناسایی کنید
- محاسبات را با useMemo بپیچید
– Dependencies را مشخص کنید
نحوه بهینه سازی محاسبات پیچیده در Render Props یا Component های با مرتبه بالاتر
نحوه استفاده از useMemo با قلاب های سفارشی
نکاتی برای استفاده موثر از useMemo
- شناسایی محاسبات گران قیمت
- وابستگی های مناسب را انتخاب کنید
- از حفظ کردن غیر ضروری خودداری کنید
-اندازه گیری عملکرد
useMemo چیست؟
useMemo
یک ابزار مفید در React است که به سریعتر کردن برنامههای شما کمک میکند. تصور کنید تابعی دارید که کارهای سنگینی را انجام می دهد، مانند محاسبه یک مسئله پیچیده ریاضی یا قالب بندی داده ها. به طور معمول، React این تابع را هر بار که کامپوننت شما رندر می شود، دوباره محاسبه می کند، حتی اگر ورودی ها یکسان باشند. این می تواند سرعت کارها را کاهش دهد.
اما با useMemo
، React تا زمانی که ورودیهای آن ثابت بماند، نتیجه آن تابع را به خاطر میآورد. پس ، اگر ورودیهای شما تغییر نمیکند، React به جای اینکه هر بار دوباره آن را محاسبه کند، فقط نتیجه ذخیرهشده را میگیرد. این باعث صرفه جویی در زمان می شود و برنامه شما را سریع تر می کند.
به زبان ساده، useMemo
مانند داشتن یک دستیار هوشمند است که پاسخهای مسائل ریاضی را به خاطر میآورد، پس مجبور نیستید آنها را بارها و بارها حل کنید.
useMemo چگونه کار می کند؟
برای درک نحوه عملکرد useMemo
، بیایید سناریویی را در نظر بگیریم که در آن شما مؤلفهای دارید که فهرستی از آیتمها را ارائه میکند و باید محاسبات سنگینی را برای استخراج فهرست انجام دهید.
بدون حافظه، این محاسبات سنگین در هر رندر اجرا می شود، حتی اگر ورودی ها بدون تغییر باقی بمانند.
در اینجا یک مثال اساسی بدون useMemo
آورده شده است:
import React from 'react'; const ListComponent = ({ items }) => { const processedItems = processItems(items); // Expensive computation return ( <ul> {processedItems.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); }; const processItems = (items) => { // Expensive computation // Imagine some heavy processing here return items.map(item => ({ id: item.id, name: item.name.toUpperCase() })); }; export default ListComponent;
در این مثال، تابع processItems
در هر رندر فراخوانی میشود، حتی اگر items
ثابت باقی بمانند.
برای بهینه سازی این، می توانیم useMemo
استفاده کنیم:
import React, { useMemo } from 'react'; const ListComponent = ({ items }) => { const processedItems = useMemo(() => processItems(items), [items]); return ( <ul> {processedItems.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> ); }; const processItems = (items) => { // Expensive computation // Imagine some heavy processing here return items.map(item => ({ id: item.id, name: item.name.toUpperCase() })); }; export default ListComponent;
با قرار دادن فراخوانی processItems
در داخل useMemo
، React فقط زمانی که items
تغییر میکنند، مقدار ذخیرهسازی شده را دوباره محاسبه میکند. این بهینه سازی می تواند به طور قابل توجهی عملکرد برنامه شما را بهبود بخشد، به خصوص زمانی که با مجموعه داده های بزرگ یا محاسبات پیچیده سروکار دارید.
زمان استفاده از useMemo
شما باید از useMemo
در سناریوهایی استفاده کنید که در آن محاسبات گران قیمت یا تبدیل داده ها در یک مؤلفه عملکردی دارید که به طور غیر ضروری در هر رندر دوباره محاسبه می شود.
در اینجا چند مثال عملی برای نشان دادن سناریوهای استفاده پایه برای useMemo
آورده شده است:
قالب بندی داده ها:
const formattedData = useMemo(() => formatData(rawData), [rawData]);
از useMemo
برای قالببندی دادههای خام در قالبی مناسب برای نمایش استفاده کنید.
فقط زمانی که rawData
تغییر می کند، formattedData
مجدداً محاسبه کنید و عملکرد را بهینه کنید.
فیلتر کردن داده ها:
const filteredData = useMemo(() => filterData(rawData, filterCriteria), [rawData, filterCriteria]);
از useMemo
برای فیلتر کردن فهرست ی از داده ها بر اساس معیارهای خاص استفاده کنید.
اطمینان حاصل کنید filteredData
تنها زمانی که rawData
یا filterCriteria
تغییر می کند، دوباره محاسبه می شود.
مرتب سازی داده ها:
const sortedData = useMemo(() => sortData(rawData, sortKey), [rawData, sortKey]);
از useMemo
برای مرتب کردن فهرست ی از داده ها بر اساس یک کلید خاص استفاده کنید.
فقط زمانی که rawData
یا sortKey
تغییر کند sortedData
دوباره مرتب کنید.
توابع یادآوری تماس:
const handleClick = useMemo(() => { return () => { // Handle click event }; }, []);
از useMemo
برای به خاطر سپردن توابع پاسخ به تماس استفاده کنید تا از ایجاد عملکردهای غیر ضروری در هر رندر جلوگیری کنید.
یک آرایه []
(
محاسبات گران قیمت:
const result = useMemo(() => { // Perform expensive calculation return performCalculation(input1, input2); }, [input1, input2]);
از useMemo
برای به خاطر سپردن نتیجه یک محاسبه گران قیمت استفاده کنید.
فقط زمانی که input1
یا input2
تغییر می کند، result
دوباره محاسبه کنید.
در هر یک از این مثالها، useMemo
تضمین میکند که محاسبات یا تبدیل گرانقیمت فقط در مواقع ضروری انجام میشود، که باعث کاهش محاسبات مجدد غیرضروری و بهینهسازی عملکرد اجزای عملکردی شما میشود.
مزایای استفاده از Memo
استفاده از قلاب useMemo
در برنامه های React مزایای بی شماری را برای بهینه سازی عملکرد ارائه می دهد.
اجتناب از محاسبات مجدد غیر ضروری:
در React، کامپوننتها هر زمان که وضعیت یا props آنها تغییر کند، دوباره رندر میشوند. اگر یک جزء محاسبات یا محاسبات گران قیمت را در منطق رندر خود انجام دهد، این محاسبات را می توان در هر رندر مجدداً اجرا کرد، حتی اگر ورودی ها تغییر نکرده باشند.
با استفاده از useMemo
، می توانید این محاسبات را به خاطر بسپارید. React فقط زمانی که وابستگی ها (ورودی ها) تغییر کند، مقدار ذخیره شده را دوباره محاسبه می کند. این به جلوگیری از محاسبات مجدد غیر ضروری و بهبود عملکرد اجزای شما کمک می کند.
بهینه سازی عملکرد رندر:
اگر اجزای React در طول هر چرخه رندر، محاسبات یا تبدیل های سنگین انجام دهند، می توانند رندر شوند. این امر به ویژه در برنامه های کاربردی در مقیاس بزرگ یا اجزایی که اغلب رندر می شوند مشکل ساز است.
useMemo
به شما امکان می دهد نتایج این محاسبات را به خاطر بسپارید و اطمینان حاصل کنید که آنها فقط در صورت لزوم انجام می شوند. این می تواند با کاهش سربار محاسباتی اجزای شما منجر به بهبود قابل توجهی در عملکرد رندر شود.
مدیریت کارآمد داده های مشتق شده:
در بسیاری از برنامههای React، دادههای مشتقشده از وضعیت یا props کامپوننتها محاسبه میشوند. به عنوان مثال، ویژگی های محاسبه شده، فهرست های فیلتر شده یا داده های قالب بندی شده اغلب از منابع داده خام مشتق می شوند.
به خاطر سپردن داده های مشتق شده با useMemo
تضمین می کند که این محاسبات به طور موثر و تنها در صورت نیاز انجام می شوند. این می تواند از رندرهای غیر ضروری جلوگیری کند و عملکرد کلی برنامه شما را بهینه کند.
افزایش تجربه کاربری:
بهینه سازی عملکرد برای ارائه یک تجربه کاربری روان و پاسخگو بسیار مهم است. اجزای کند یا بی پاسخ می توانند منجر به تجربه کاربری ضعیف و ناامیدی کاربران شوند.
با استفاده از useMemo
برای بهینه سازی عملکرد اجزای خود، می توانید اطمینان حاصل کنید که برنامه شما سریع و پاسخگو باقی می ماند و رضایت و تعامل کاربر را بهبود می بخشد.
useMemo
برای بهینهسازی عملکرد در برنامههای React ضروری است، زیرا به شما امکان میدهد از محاسبات مجدد غیرضروری اجتناب کنید، عملکرد رندر را بهینه کنید، دادههای مشتقشده را به طور کارآمد مدیریت کنید و تجربه کلی کاربر را ارتقا دهید.
با به خاطر سپردن محاسبات گران قیمت با useMemo
، میتوانید مؤلفههای React سریع، پاسخگو و کارآمد ایجاد کنید که تجربه کاربری یکپارچه را ارائه میکنند.
نحو و استفاده از useMemo Hook
قلاب useMemo
در React برای به خاطر سپردن محاسبات گران قیمت استفاده می شود. نحو آن ساده است و دو آرگومان نیاز دارد: یک تابع که محاسباتی را که باید به خاطر بسپارید را نشان میدهد و یک آرایه از وابستگیها.
نحو و استفاده از قلاب useMemo
در اینجا آمده است:
import React, { useMemo } from 'react'; const MyComponent = ({ data }) => { // Memoize the result of the expensive computation const memoizedValue = useMemo(() => { // Perform some expensive computation using the data return processData(data); }, [data]); // Dependency array: recompute if 'data' changes return ( <div> {/* Render the memoized value */} <p>{memoizedValue}</p> </div> ); }; export default MyComponent;
در این مثال:
ما useMemo
از کتابخانه React وارد می کنیم.
در داخل مؤلفه کاربردی MyComponent
، با استفاده از قلاب useMemo
یک memoizedValue
ثابت را اعلام می کنیم.
اولین آرگومان useMemo
تابعی است که محاسبات گران قیمت را انجام می دهد. در این حالت تابع processData
فراخوانی می کنیم و data
به عنوان پارامتر ارسال می کنیم.
آرگومان دوم useMemo
آرایه ای از وابستگی ها است. React فقط در صورتی که هر یک از این وابستگی ها تغییر کند، مقدار ذخیره شده را دوباره محاسبه می کند. در اینجا، [data]
به عنوان آرایه وابستگی مشخص میکنیم، که نشان میدهد هر زمان که پایه data
تغییر میکند memoizedValue
باید دوباره محاسبه شود.
در نهایت، memoizedValue
را در داخل JSX کامپوننت رندر می کنیم.
با استفاده از useMemo
، اطمینان حاصل می کنیم که محاسبات گران قیمت در داخل تابع فقط در صورت لزوم اجرا می شود و عملکرد جزء ما را بهینه می کند.
چگونه useMemo با سایر قلاب ها مانند useState و useEffect متفاوت است؟
useMemo
از نظر هدف و نحوه تأثیرگذاری بر رفتار مؤلفه با سایر قلاب ها مانند useState
و useEffect
متفاوت است:
وضعیت استفاده:
useState
برای مدیریت وضعیت در اجزای عملکردی استفاده می شود.
این به شما امکان می دهد متغیرهای حالت را ایجاد و به روز کنید، و هنگامی که مقادیر آنها تغییر می کند، رندرهای مجدد را شروع کنید.
متغیرهای حالتی که توسط useState
مدیریت میشوند معمولاً برای ذخیره دادههایی استفاده میشوند که میتوانند در طول زمان تغییر کنند، مانند ورودیهای فرم، جابهجاییها یا شمارندهها.
useEffect:
useEffect
برای کنترل عوارض جانبی در اجزای عملکردی استفاده می شود.
بعد از هر رندر اجرا می شود و به شما امکان می دهد کارهایی مانند واکشی داده ها، اشتراک ها یا دستکاری DOM را انجام دهید.
useEffect
به شما امکان می دهد تا عوارض جانبی را از منطق مؤلفه اصلی جدا کنید و اجزای خود را تمیز و منظم نگه دارید.
useMemo:
useMemo
برای به خاطر سپردن محاسبات گران قیمت در اجزای عملکردی استفاده می شود.
نتیجه یک تابع را در حافظه پنهان ذخیره می کند و زمانی که ورودی های تابع بدون تغییر باقی می مانند، نتیجه ذخیره شده را برمی گرداند.
برخلاف useState
و useEffect
که به ترتیب حالت و عوارض جانبی را مدیریت میکنند، useMemo
تنها بر روی بهینهسازی عملکرد با اجتناب از محاسبات مجدد غیرضروری تمرکز میکند.
در حالی که useState
و useEffect
به ترتیب برای مدیریت وضعیت و مدیریت عوارض جانبی استفاده میشوند، useMemo
به طور خاص برای بهینهسازی عملکرد با به خاطر سپردن محاسبات طراحی شده است. هر قلاب هدف مشخصی را در توسعه React انجام می دهد، اما می توان آنها را با هم برای ساخت اجزای کارآمد و قابل نگهداری استفاده کرد.
نحوه به خاطر سپردن محاسبات گران قیمت با استفاده از useMemo
برای به خاطر سپردن محاسبات گران قیمت با استفاده از useMemo
، این مراحل را دنبال کنید:
محاسبه گران قیمت را شناسایی کنید:
تعیین کنید که کدام محاسبات در مؤلفه شما گران هستند و از حفظ کردن سود می برند. اینها می تواند شامل محاسبات پیچیده، تبدیل داده یا فراخوانی تابعی باشد که منابع قابل توجهی را مصرف می کند.
محاسبات را با useMemo بپیچید:
از قلاب useMemo
برای به خاطر سپردن نتیجه محاسبات استفاده کنید. آرگومان اول برای useMemo
تابعی است که محاسبات را انجام می دهد و آرگومان دوم آرایه ای از وابستگی ها است.
تعیین وابستگی ها:
آرایهای از وابستگیها را برای useMemo
ارائه دهید تا مشخص شود که چه زمانی باید مقدار ذخیرهسازی شده مجدداً محاسبه شود. اگر هر یک از وابستگی ها تغییر کند، useMemo
مقدار ذخیره شده را دوباره محاسبه می کند.
در اینجا مثالی از نحوه به خاطر سپردن یک محاسبات گران قیمت با استفاده از useMemo
آورده شده است:
import React, { useMemo } from 'react'; const MyComponent = ({ data }) => { // Memoize the result of the expensive computation const memoizedValue = useMemo(() => { // Perform the expensive computation here return processData(data); }, [data]); // 'data' is a dependency return ( <div> {/* Render the memoized value */} <p>{memoizedValue}</p> </div> ); }; export default MyComponent;
در این مثال:
ما از useMemo
برای به خاطر سپردن نتیجه تابع processData
استفاده می کنیم که محاسبات گران قیمت را انجام می دهد.
پایگاه data
به عنوان یک وابستگی در آرایه وابستگی [data]
مشخص می شود. این بدان معنی است که memoizedValue
هر زمان که پایه data
تغییر کند دوباره محاسبه می شود.
مقدار ذخیره شده ( memoizedValue
) سپس در داخل JSX مؤلفه ارائه می شود.
با به خاطر سپردن محاسبات گران قیمت با useMemo
، اطمینان حاصل می کنیم که فقط در صورت لزوم دوباره محاسبه می شود و عملکرد جزء ما را بهینه می کند.
نحوه بهینه سازی محاسبات پیچیده در Render Props یا کامپوننت های مرتبه بالاتر
useMemo
همچنین می تواند به طور موثر در رندر props یا اجزای مرتبه بالاتر (HOC) برای بهینه سازی محاسبات پیچیده استفاده شود. مثال HOC زیر را در نظر بگیرید:
import React, { useMemo } from 'react'; const withDataFetching = (WrappedComponent) => { return function WithDataFetching({ data }) { // Memoize the processedData calculation const processedData = useMemo(() => processData(data), [data]); return <WrappedComponent processedData={processedData} />; }; }; const DisplayData = ({ processedData }) => { return ( <div> {processedData.map(item => ( <div key={item.id}>{item.name}</div> ))} </div> ); }; const processData = (data) => { // Expensive computation // Imagine some heavy processing here return data.map(item => ({ id: item.id, name: item.name.toUpperCase() })); }; export default withDataFetching(DisplayData);
در این مثال، processedData
با استفاده از useMemo
در داخل withDataFetching
HOC ذخیره می شود. این بهینهسازی تضمین میکند که محاسبات سنگین در processData
تنها زمانی انجام میشود که پایه data
تغییر کند و عملکرد کلی مؤلفه را بهبود بخشد.
نحوه استفاده از useMemo با قلاب های سفارشی
یکی دیگر از موارد استفاده قدرتمند برای useMemo
در قلاب های سفارشی برای به خاطر سپردن مقادیر در بین اجزا است. بیایید یک قلاب سفارشی ایجاد کنیم که داده ها را از یک API واکشی می کند و نتیجه را حفظ می کند:
import { useState, useEffect, useMemo } from 'react'; const useDataFetching = (url) => { const [data, setData] = useState(null); useEffect(() => { const fetchData = async () => { const response = await fetch(url); const result = await response.json(); setData(result); }; fetchData(); }, [url]); // Memoize the data value const memoizedData = useMemo(() => data, [data]); return memoizedData; }; export default useDataFetching;
اکنون، هر زمان که از قلاب useDataFetching
در کامپوننت استفاده می کنیم، مقدار data
با استفاده از useMemo
به حافظه سپرده می شود. این تضمین میکند که دادههای واکشی شده تنها زمانی که URL تغییر میکند مجدداً محاسبه میشوند، از تماسهای غیرضروری API جلوگیری میکند و عملکرد را در بین اجزا بهبود میبخشد.
نکاتی برای استفاده موثر از useMemo
در اینجا چند نکته برای استفاده موثر useMemo
آورده شده است:
محاسبات گران قیمت را شناسایی کنید: بخش هایی از برنامه خود را که شامل محاسبات یا محاسبات سنگین هستند، شناسایی کنید.
وابستگی های مناسب را انتخاب کنید: مطمئن شوید که تمام وابستگی های لازم را در آرایه وابستگی گنجانده اید. عدم وابستگی می تواند منجر به رفتار غیرمنتظره شود.
اجتناب از حفظ کردن غیر ضروری: از به خاطر سپردن مقادیری که نیازی به حفظ کردن ندارند، خودداری کنید، زیرا می تواند پیچیدگی غیر ضروری را به کد شما اضافه کند.
اندازه گیری عملکرد: از ابزارهای نظارت بر عملکرد برای اندازه گیری تأثیر useMemo
بر عملکرد برنامه خود استفاده کنید و بر اساس آن تنظیم کنید.
نتیجه
useMemo
ابزاری قدرتمند برای بهینه سازی عملکرد برنامه های React شما با به خاطر سپردن نتایج محاسبات گران قیمت است.
با استفاده مؤثر useMemo
، می توانید از رندرهای غیرضروری جلوگیری کنید و پاسخگویی کلی برنامه خود را بهبود ببخشید.
پس ، useMemo
فقط به این دلیل که ترسناک به نظر می رسد نادیده نگیرید. از آن به عنوان یک ابزار ارزشمند در سفر توسعه React خود استفاده کنید و از پتانسیل آن برای ایجاد برنامه های کاربردی وب سریعتر و کارآمدتر استفاده کنید.
ارسال نظر