useMemo یک ابزار ارزشمند در چارچوب React است که برای بهینه سازی عملکرد با به خاطر سپردن محاسبات گران قیمت طراحی شده است.

با useMemo ، React می‌تواند نتیجه فراخوانی تابع را ذخیره کند و زمانی که وابستگی‌های آن تابع تغییر نکرده است، به جای محاسبه مجدد مقدار در هر رندر، از آن استفاده مجدد کند.

useMemo به عنوان یک ابزار قدرتمند برای بهینه سازی عملکرد بدون به خطر انداختن خوانایی یا قابلیت نگهداری کد برجسته می شود. اما اغلب توسط مبتدیان نادیده گرفته می شود یا به اشتباه درک می شود.

در این راهنمای جامع، در مورد اینکه useMemo چیست، چگونه کار می‌کند و چرا یک ابزار ضروری برای هر توسعه‌دهنده React است، بحث خواهیم کرد.

فهرست مطالب

useMemo چیست؟

useMemo چگونه کار می کند؟

چه زمانی از 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 خود استفاده کنید و از پتانسیل آن برای ایجاد برنامه های کاربردی وب سریعتر و کارآمدتر استفاده کنید.

خبرکاو