DEV Community: FrontEndi

هوک useRef ری اکت و بررسی تخصصی React.useRef

FrontEndi — Fri, 10 Nov 2023 18:32:37 +0000

تو این مقاله میخوایم به بررسی تخصصی هوک useRef ری اکت و کاربردش در زمینه دسترسی به Element های موجود در DOM بپردازیم. با فِرانت اِندی همراه باشید 🙂

تو مقاله های قبلی راجب هوک useState و هوک useReducer صحبت کردیم و دیدیم زمانیکه مقادیرشون تغییر میکنه ، کامپوننت ما re-Render میشه ! اما شاید بخوایم یک مقدار ذخیره شده رو تغییر بدیم بطوریکه کامپوننت ما re-Render نشه!

اینجاست که هوک ()useRef میاد وسط 🙂 البته کاربرد های دیگه مثل دسترسی به Element های موجود در DOM هم داره که در ادامه بصورت تخصصی بررسیشون میکنیم.

هوک useRef ری اکت چیست ؟

هوک useRef یکی از هوک های معرفی شده توسط تیم React هست که در نسخه 16.8 معرفی شد.

هوک useRef در React دو کاربرد اصلی داره :

کاربرد اصلی هوک ()useRef دسترسی به Element های موجود در DOM هست. ( اگه در مورد DOM یا Virtual Dom اطلاعاتی ندارید حتما مقاله Virtual Dom ری اکت رو مطالعه کنید )
دومین کاربرد هوک useRef که بسیار هم کاربردیه ، ذخیره یک Mutable Value بین re-Render های مختلف کامپوننت شماست.

نگران نباشید چون قراره تو ادامه این مقاله به زبان ساده اما تخصصی کاربردشون رو بررسی کنیم.

ساخت یک ref با کمک هوک ()useRef

برای ایجاد یک refrence به کمک هوک useRef توی کامپوننت خودتون بصورت زیر عمل کنین :

const myRef = useRef();

هنگام ایجاد useRef میشه یک مقدار اولیه هم بهش اختصاص داد :

const myRef = useRef('FrontEndi.com');

چطور از useRef استفاده کنیم ؟

بطور کل برای استفاده از هوک useRef در React باید 3 مرحله زیر رو انجام داد :

ساختن Ref
const myRef = useRef();

اختصاص مقدار به Ref
myRef.current = "FrontEndi";

دسترسی به مقدار Ref
console.log(myRef.current);

برای دسترسی به Element های موجود در Dom شما باید طبق 3 مرحله بالا عمل کنید . یعنی :

یک ref به کمک ()useRef بسازید .
یک Element به آن ref اختصاص دهید.
حالا مطابق مرحله 3 میتوانید به Element موجود در DOM دسترسی داشته باشید.

دسترسی به ارتفاع صفحه کاربر با useRef در ری اکت

بیاید یه مثال واقعی از ref و هوک ()useRef ری اکت رو باهم بررسی کنیم.

فرض کنیم تو پروژه ای هستیم که نیاز داریم ارتفاع صفحه کاربر رو بر حسب پیکسل بدست بیاریم. پس لازمه که به Element روت خودمون در DOM دسترسی داشته باشیم :

`import { useEffect, useRef } from "react";

export default function App() {
// Create Ref With useRef Hook
const divElement = useRef();

// For Get Height of Div Element in First Render
useEffect(() => {
console.log(
"Height of div Element Is :", divElement.current.offsetHeight
);
}, []);

return (

FrontEndi.com :)

);
}`

تو مثال بالا به اِلِمان div یک ref دادیم و میتونیم هر زمان که لازم بود در DOM بهش دسترسی داشته باشیم. ( خط 15 )

این ref به کمک هوک useRef در خط 5 ساخته شده.

تو خط 9 به کمک ref ساخته شده تونستیم به اِلِمان div دسترسی داشته باشیم و مقدار ارتفاعش رو ببینیم. ما اینجا خصوصیت offsetHeight رو log گرفتیم اما شما میتونید به هر خصوصیت دیگه ای دسترسی داشته باشید ( با توجه به نیازتون ).

اگه میخواید از useRef در ری اکت استفاده کنید باید چند نکته مهم رو در نظر بگیرید .
تغییر مقدار ref باعث re-Render کامپوننت نمیشه !

زمانی که مقادیر useState یا useReducer رو تغییر میدیم ، کامپوننت ما re-Render میشه . اما useRef اینطور نیست !

تغییر مقادیر ref باعث re-Render کامپوننت شما نمیشه .
از مقادیر ref به عنوان Dependencies استفاده نکنید !

خیلی از هوک ها در React از ما یک آرایه به عنوان Dependencies میگیرن. ( مثل هوک useEffect )

اما به هیچ عنوان از مقادیر ref برای استفاده در Dependencies Array ها استفاده نکنید چون باعث ارور میشه.
چه زمانی از useRef استفاده نکنیم ؟

با اینکه هوک useRef در ری اکت یکی از هوک های بشدت کاربردی و مفیده ، ولی هرجایی نباید ازش استفاده کنیم. در واقع باید در جایی که useRef کاربرد داره ازش استفاده کنیم ، نه جای دیگری !

بطور کل اگه میخواید با تغییر مقدار ذخیره شده ، کل کامپوننت شما re-Render بشه باید از هوک useState استفاده کنید اما اگه نیازی به re-Render ندارید میتونید از هوک useRef استفاده کنید.

لطفا برای مطالعه ادامه این مقاله + مثالها و تیکه کد های بیشتر روی لینک زیر کلیک کنید :
useRef در ریکت

هوک useEffect ری اکت و بررسی تخصصی React.useEffect

FrontEndi — Fri, 10 Nov 2023 18:29:27 +0000

هوک useEffect ری اکت یکی از حیاتی ترین هوک های React هست. حقیقتا اصلا مهم نیست که چند وقته سراغ React اومدید ، useEffect یکی از ضروری ترین مباحثی هست که هر ری اکت دِوِلوپری باید بهش تسط کامل داشته باشه !!

با فِرانت اِندی همراه باشید که میخوایم این هوک خفن رو بررسی کنیم 🙂

قبل از هرچیز ، بهتره ببینیم خود ری اکت چه تعریفی از این هوک خفنش داره :
هوک useEffect به شما امکان مدیریت Side Effect ها را میدهد !

اما Side Effect یعنی چی ؟!

خود React میگه که از هوک useEffect میشه برای مدیریت Side Effect های کامپوننت استفاده کرد.

بطور ساده و خلاصه ، هر رفتار یا عملی که باعث تاثیر خارجی در Function شود را Side Effect میگوییم.

تو ری اکت معمولا چنین Side Effect هایی رو داریم :

دریافت Data از سرور :
زمانیکه ما از سرور یکسری اطلاعات دریافت میکنیم و در صفحه نمایش میدیم. این اتفاق نمونه بارز Side Effect هست.
تغییر DOM :
وقتی میخوایم یک تغییر در DOM ایجاد کنیم مثل اضافه کردن Event Listener یا تغییر Element ها. این موارد هم یک نوع Side Effect هستن.
خواندن اطلاعات از Local Storage :
خوندن اطلاعات ذخیره شده در Local Storage هم یک نوع Side Effect محسوب میشه.
چند نمونه دیگر :
اضافه کردن setTimeOut ، استفاده از سوکت و ابزار های بروزرسانی real time نیز Side Effect محسوب میشن.

تمام موارد بالا یک نوع Side Effect هستن.

در واقع Side Effect ها غیرقابل پیش بینی هستن چون با محیط خارجی در ارتباط هستن! مثلا برای صفحه وبلاگ قصد دریافت لیست مقالات از سرور را داریم اما ارور 500 دریافت میکنیم!

Side Effect ها معمولا عوارض جانبی واسه اپیکیشن ما دارن مثل Memory Leaks ( پر شدن حافظه رم ) و رفتار غیرمنتظره و پیش بینی نشده.

پس با توجه به عوارضی که Side Effect ها دارن ، خیلی ضروریه که بتونیم مدیریتشون کنیم!

هوک useEffect ری اکت اومده تا باهاش بتونیم Side Effect های ری اکت رو مدیریت کنیم 🙂

هوک useEffect ری اکت چیست ؟

تو React ، هوک useEffect به ما امکان مدیریت Side Effect هارو میده ( مواردی که در بالا مثال زدیم مثل Data Fetching )

همچنین هوک useEffect امکان مدیریت چرخه حیات ( lifecycle ) کامپوننت رو بهمون میده. ( مثلا اینکه زمانیکه کامپوننت ایجاد میشه ، re-Render میشه یا از DOM حذف میشه چه اتفاقی بیوفته )

مدیریت چرخه حیات کامپوننت باعث میشه که رفتار کامپوننت ما قابل پیش بینی باشه.

قبل از اینکه بریم هوک useEffect در ری اکت رو بررسی کنیم، باید نکته زیر رو برای خودمون یادآوری کنیم:

اِفِکت ها تو ری اکت بعد از هر re-Render اتفاق میوفتن البته میشه جلوی این موضوع رو گرفت.

چطور از هوک useEffect استفاده کنیم ؟

چگونگی استفاده از هوک useEffect در ری اکت بصورت زیر هست :

useEffect(callback, [dependencies]);

یا :

`// 1. ایمپورت کردن هوک یوز افکت
import { useEffect } from 'react';
// تابع ما
const App = () => {

useEffect(() => {

}, []);

return(

FrontEndi.com)
}`

تو خط 2 ما هوک useEffect رو از خود react فراخوانی کردیم.

تو خط 6 داخل کامپوننت خودمون از هوک useEffect استفاده کردیم.

خود هوک useEffect از ما 2 ورودی میگیره:

اولین آرگومان یک تابع هست :

تابعی که به useEffect پاس میدیم یک Callback Function هست. این تابع بعد از Render کامپوننت اجرا میشه.

تو این تابع میتونیم Side Effect های خودمون رو اجرا کنیم. ( مثل دریافت اطلاعات از سرور و .. )

تابع callback دقیقا بعد از بروزرسانی DOM اجرا میشه. تو تیکه کد بالا یک تابع خالی به useEffect پاس دادیم اما هر نوع عملیاتی میشه داخلش نوشت.

دومین آرگومان Dependencies هست که باید در قالب یک آرایه به useEffect پاس داده بشه :

دومین آرگومان که اختیاری هست ، یک آرایه هست. این آرایه وابستگی های useEffect هست.

این آرایه باید شامل مقادیری باشه که میتونن رو Side Effect ما تاثیر بزارن .

در واقع اگه این وابستگی ها مقدارشون تغییر کنه ، Side Effect ما مجدد اجرا میشه. به مثال زیر دقت کنید :

`// ایمپورت کردن هوک یوز افکت
import { useEffect } from 'react';
// کامپوننت ما
const App = ({name,email}) => {
// استفاده از هوک یوز افکت
useEffect(() => {
axios.get('mysite.com/api // My Side Effect')
}, [name,email]); // useEffect Dependencies

return(

FrontEndi.com)
}`

تو خط 8 آرایه Dependencies رو تعریف کردیم. خط 8 این معنی رو میده که اگر مقدار name و email تغییر کردن Side Effect ما ( خط 7 ) باید مجدد اجرا بشه.

اگه بخوایم دقیقتر خط 8 رو بررسی کنیم میتونیم اینو بگیم :

بین re-Render های مختلف کامپوننت ، هوک useEffect مقادیر Dependencies رو چک میکنه که ببینه آیا تغییری داشتن یا نه ؟ اگه بدون تغییر بودن که هیچ. اما اگه مقدارشون تغییر پیدا کرده بود ، تابع داخل useEffect یا همون Side Effect مجدد اجرا میشه.

این اتفاق خیلی خوبه چون خیلی وقت ها پیش میاد که میخوایم درصورت تغییر یک مقدار ، یک کاری رو انجام بدیم. مثلا درصورت تغییر اطلاعات کاربر ، اطلاعات جدید کاربر رو به سرور یا Local Storage بفرستیم.
چند نکته مهم راجب useEffect ری اکت

اگه قصد استفاده از useEffect در React رو دارید ، باید یکسری نکات مهم رو رعایت کنید.
اجرا شدن useEffect بعد هر re-Render

اگه آرایه Dependencies ( آرگومان دوم useEffect ) رو قرار ندید ، تابعی که داخل useEffect قرار دادید بعد از هر re-Render اجرا میشه. ( اجرا بعد از هر re-Render )
لوپ بینهایت در useEffect !

اگه هیچ Dependencies برای useEffect تعریف نکنید و داخل تابع useEffect یک State رو بروزرسانی کنید ، به این دلیل که پس از هر تغییر State یک re-Render صورت میگیره و مجدد تابع useEffect اجرا میشه و مجدد State بروزرسانی میشه ، کامپوننت شما داخل یک Loop بینهایت میوفته و برنامه شما کرش میکنه! ( Infinite Loop )

تو تیکه کد زیر این مشکل واضحه :

`function MyComponent() {
const [data, setData] = useState([])

useEffect(() => {
fetchData().then(myData => setData(myData)) // اینجا استیت رو آپدیت میکنیم که باعث ری رندر میشه
}); // اینجا آرایه وابستگی تعریف نشده. پس بعد هر ری رندر اجرا میشه
}`

تو تیکه کد بالا اتفاق زیر میوفته :

برای اولین بار Render صورت میگیره و تابع داخل useEffect اجرا میشه. داخل این تابع State رو آپدیت کردیم و چون State تغییر میکنه ، مجدد کامپوننت re-Render میشه. همین پروسه تا روز قیامت ادامه پیدا میکنه 🙂

برای اینکه اتفاق بالا نیوفته ، باید یک آرایه خالی به عنوان وابستگی به useEffect پاس بدیم.

زمانیکه یک آرایه خالی ( Empty Array ) به هوک useEffect پاس میدیم، باعث میشه که تابع داخل useEffect فقط بعد از اولین Render اجرا بشه. ( یعنی یکبار )

مثال زیر ، شکل تصحیح شده تیکه کد بالاست :

`function MyComponent() {
const [data, setData] = useState([])

useEffect(() => {
fetchData().then(myData => setData(myData)) // ساید افکت ما
},[]); // آرایه خالی یعنی فقط بعد اولین رندر اجرا شو
}`

تابع CleanUp در ری اکت

گاهی اوغات میخوایم وقتی کامپوننت ما از بین میره ( از DOM حذف میشه ) یک اتفاقی بیوفته.

مثلا سناریویی رو در نظر بگیرید که داخل useEffect یک تایمر گذاشتیم اما کامپوننت ما از DOM حذف میشه. اتفاقی که اینجا میوفته این هست که کامپوننت ما از DOM حذف میشه اما تایمر هنوز داره کار میکنه چون clearInterval نشده!

کد زیر کد مشکل دار هست چون تابع cleanUp نداره :

`function Timer() {
const [time, setTime] = useState(0);

useEffect(() => {
setInterval(() => setTime(1), 1000); // یه تایمر داریم که هر یک ثانیه یکبار اجرا میشه اما هیچموقع متوقفش نکردیم
}, []);
}`

مشکلی که تو تیکه کد بالا داریم این هست که :

زمانیکه کامپوننت از DOM حذف میشه ، setInterval همچنان کار میکنه و setTime رو انجام میده! ( درصورتیکه کامپوننت حذف شده )

این اتفاق به این دلیل میوفته که ما clearInterval نکردیم. ( تایمر رو متوقف نکردیم ) پس در اینجا به مشکل پر شدن حافظه در ری اکت بر میخوریم ( Memory Leak )

برای رفع این مشکل باید یک تابع Clean Up بنویسیم. یعنی زمانیکه کامپوننت ما از DOM حذف شد یک کاری انجام بدیم.

در این سناریو باید پس از حذف کامپوننت از DOM ، عملیات ClearInterval رو انجام بدیم .

برای اینکه اینکار رو انجام بدیم باید داخل useEffect ، یک تابع Return کنیم :

`function Timer() {
const [time, setTime] = useState(0);

useEffect(() => {
let interval = setInterval(() => setTime(1), 1000);

return () => {
  // setInterval cleared when component unmounts
  clearInterval(interval);
}

}, []);
}`

اگه تو useEffect یک تابع Return کنید ، خود useEffect متوجه میشه که این تابع رو فقط در زمان حذف کامپوننت از DOM باید اجرا کنه.

خط 8 و 9 تیکه کد بالا فقط بعد از حذف شدن کامپوننت از DOM ، اجرا میشه.

مثلا زمانیکه از کاربر از یک صفحه به صفحه دیگه منتقل میشه ، unmounted کامپوننت رخ میده خط 8 و 9 تیکه کد بالا اجرا میشه.

مثال کاربردی از هوک useEffect

ابتدای همین مقاله گفتیم که از هوک useEffect برای مدیریت Side Effect ها استفاده میکنیم.

تو مثال زیر یک Side Effect رو تو بدنه کامپوننت اجرا کردیم که این اشتباهه. اگه از useEffect برای اجرای Side Effect ها استفاده نکنیم امکان مدیریت Side Effect هارو نداریم!

function Greet({ name }) { const message =Hello, ${name}!`;

// این بده
document.title = Greetings to ${name}; // ساید افکت ما

return

{message};
}`

تو تیکه کد بالا یک Side Effect داریم .

خط 5 با هر بار re-Render شدن کامپوننت اجرا میشه و این اصلا خوب نیست چون این Side Effect باید فقط درصورت تغییر مقدار name که یک Props هست ، اجرا بشه.

برای رفع این مشکل و مدیریت Side Effect بطوریکه فقط درصورت تغییر Props ، رندر مجدد صورت بگیره باید بصورت زیر عمل کنیم :

`import { useEffect } from 'react';

function Greet({ name }) {
const message = Hello, ${name}!;

useEffect(() => {
// Good!
document.title = Greetings to ${name}; الان ساید افکت ما فقط درصورت تغییر نام اجرا میشه و این عالیه
}, [name]);

return

{message};
}`

بریم چند نمونه از کاربرد هوک useEffect در React رو ببینیم …

با هوک useEffect ری اکت چیکار میشه کرد ؟

بطور خلاصه و ساده ما میتونیم با هوک useEffect ری اکت ، یکسری کارها و عملیات مواقع زیر انجام بدیم :

هنگام ایجاد شدن کامپوننت در DOM یا همون Component did mount

بطور مثال وقتی کاربر وارد صفحه X شد یک پیغام بهش نشون بدیم. یا وقتی کاربر وارد صفحه فروشگاه شد ، لیست محصولات رو از سرور دریافت کنیم. بصورت زیر :

useEffect(() => { // فقط زمان ایجاد کامپوننت اجرا میشم document.title = 'کامپوننت ایجاد شد'; axios.get('/blogs') // دریافت لیست مقالات از سرور }, []);

تو تیکه کد بالا ، آرایه خالی به عنوان Dependencies باعث شده که تابع فقط 1 بار پس از اولین رندر اجرا بشه و تو re-Render های بعدی کامپوننت اجرا نشه.

هنگام تغییر مقدار Value هایی که خودمون مشخص کردیم به عنوان Dependencies ( همون Component did update )

مثلا درصورت تغییر سبد خرید کاربر ، سبد خرید جدید رو داخل Local Storage ذخیره کنیم. ( در این صورت باید cart رو به عنوان Dependencies برای useEffect قرار بدیم تا فقط درصورت تغییر cart این اتفاق رخ بده )
تو مثال زیر گفتیم هر زمان props تغییر کرد ، callback Function ما مجدد اجرا بشه :

useEffect(() => { localstorage.SetItem('cart',JSON.stringify(cart)) // من زمانی که سبد خرید تغییر کنه اجرا میشم }, [cart]);

تو Component did update یه نکته ای وجود داره. اینکه اجرای Side Effect یکبار پس از اولین Render صورت میگیره و در دفعات بعد فقط هنگام تغییر مقادیر Dependencies صورت میگیره.

هنگام حذف شدن کامپوننت از DOM یا همون Unmounting ( بطور مثال این مرحله هنگام تغییر صفحه توسط کاربر اتفاق میوفته )

مثلا میخوایم وقتی کاربر از فروشگاه به صفحه دیگه ای رفت ، یکسری کارها داخل صفحه فروشگاه اتفاق بیوفته.
اگه داخل useEffect یک تابع Return کنیم ، تابع فقط پس از حذف کامپوننت از DOM اجرا میشه :

`useEffect(()=>{

return function cleanUp(){
// من فقط بعد از حذف کامپوننت از دام اجرا میشم
}

},[])`

ادامه این مقاله

لطفا برای مطالعه ادامه این مقاله + تیکه کد ها و مثالهای بیشتر روی لینک زیر کلیک کنید :

useEffect در ریکت

هوک useReducer ری اکت و بررسی تخصصی useReducer

FrontEndi — Fri, 10 Nov 2023 18:22:58 +0000

هوک useReducer رو میشه به عنوان یک جایگزین برای هوک useState در نظر گرفت ! در واقع هوک useReducer به ما کمک میکنه تا State های پیچیده تر کامپوننت های خودمون رو بتونیم مدیریت کنیم !

اگه State شما سادس ، همون هوک useState کاملا جوابگوی نیاز شماست اما اگه State های پیچیده تری دارید بهتره که از هوک useReducer ری اکت استفاده کنید.

ترکیب useReducer و useContext یک جایگزین عالی برای Redux و MobX !

اگه هوک useReducer رو با هوک useContext ترکیب کنید میشه گفت دیگه نیازی به State Managment هایی مثل Redux یا MobX ندارید!

گاهی اوغات توی اپیکیشن های ری اکتی خودمون یکسری State های Global داریم. معمولا برای مدیریت این State های Global از کتابخانه هایی مثل Redux ، MobX و Recoil استفاده میکنیم .

اما میشه با ترکیب useReducer و useContext این State های Global رو بطور مناسبی مدیریت کرد که دیگه نیازی به استفاده از Redux و سایر State Managment ها نداشته باشیم .

البته ناگفته نماند که این موضوع کاملا بستگی به پروژه شما و نوع State های Global شما دارد.

هوک useReducer ری اکت چیست ؟

درواقع هوک useReducer برای ذخیره کردن یک مقدار و بروزرسانی اون مقدار استفاده میشه . ( مثل هوک useState )

هوک useReducer دوتا آرگومان ورودی از ما دریافت میکنه :

 اولین آرگومان یک تابع reducer هست که برای بروزرسانی مقدار ذخیره شده کاربرد داره .
 دومین آرگومان یک مقدار اولیه ( Initial State ) هست .

هوک useReducer یک آرایه Return میکنه داخل این آرایه 2 چیز وجود داره :

مقدار فعلی State
یک تابع Dispatch که میتونیم از این تابع برای بروزرسانی مقدار State استفاده کنیم ( با پاس دادن یک Action به این Dispatch )

طبق صحبت هایی که تا الان کردیم ، هوک useReducer همون کاری رو انجام میده که Redux ( یک کتابخانه برای مدیریت State ) انجام میده با چند تفاوت. اما چون قصد نداریم در این مقاله به Redux بپردازیم فقط به این نکته اشاره میکنیم که مدیریت State های Global با useReducer خیلی ساده تر است اما Redux برای مدیریت State های بسیار پیچیده و سنگین مناسبتر است.
تابع Reducer در useReducer

گفتیم که هوک useReducer یک تابع reducer از ما میگیره . اما این تابع دقیقا چیه ؟

خیلی ساده بخوایم reduce رو توضیح بدیم میتونیم اون رو مثل یک دستگاه قهوه ساز در نظر بگیریم :

دستگاه قهوه ساز از شما پودر قهوه میگیره ، بهش آب داغ اضافه میکنه و قهوه تحویل شما میده 🙂 تابع reducer از شما State قبلی رو میگیره ، یکسری عملیات روش انجام میده و State جدید رو تحویل شما میده.

هوک useReducer ری اکت مشابه همین کار رو انجام میده. هوک useReducer یک تابع reducer از ما دریافت میکنه و یک مقدار به ما Return میکنه.

تیکه کد زیر یک مثال ساده از نحوه استفاده از هوک useReducer در ری اکت هست :

const [count, dispatch] = useReducer(reducer, initialState);

تو مثال بالا به هوک useReducer دو مقدار پاس دادیم ( تابع reducer و مقدار اولیه State )

خود تابع reducer ، دو مقدار از ما میگیره و یک مقدار رو Return میکنه .

اولین مقدار State فعلی و دومین مقدار Action ما هست ( منظور از Action کاری هست که میخوایم انجام بدیم مثل اضافه کردن ، کم کردن و ..)

یعنی تابع reducer باید بصورت زیر باشه :

`const reducer=(state, action)=> { }

dispatch({ type: 'increment' })`

در واقع تابع reducer بر اساس نوع action ارسال شده بهش ، کارهایی که باید رو انجام میده.

مثلا تو خط 3 بهش گفتیم increment ، پس داخل تابع reducer باید مشخص کنیم که اگر Action ما Increment بود چه اتفاقی بیوفته ( مثلا مقدار count زیاد بشه )
مقدار InitialState در useReducer

دومین آرگومانی که باید به هوک useReducer پاس بدیم ، InitialState یا همون مقدار اولیه State هست .

تو مثال زیر این کار رو انجام دادیم:

`const initialState = { count: 1 }

const [state, dispatch] = useReducer(reducer, initialState)`

تو اولین خط تیکه کد بالا ، یک Object داریم که این Object رو به عنوان مقدار اولیه به هوک useReducer دادیم.
متود dispatch در useReducer

معادل فارسی عبارت dispatch ، اعزام هست. زمانیکه میخوایم یک کار ( action ) اتفاق بیوفته ، تابع dispatch رو صدا میزنیم .

خود تابع dispatch به عنوان ورودی از ما یک Object میگیره که نوع کار رو مشخص میکنه. در حقیقت Action توسط متود dispatch به reducer میرسه .

خود اکشنی که به reducer میفرستیم ، مشخص کننده نوع کار هست . در حقیقت داخل تابع reducer مشخص کردیم که برای هر نوع Action چه اتفاق هایی باید بیوفته .

پس از انجام عملیات dispatch با Action مدنظرمون ، Reducer کارها و محاسباتش رو انجام میده و نتیجه رو Return میکنه .

Action شما باید یک Object باشه که شامل 2 مقدار Key و Payload باشه :

const INCREMENT={ type : "INCREMENT", payload: null, }

تو تیکه کد بالا یک Action نمونه رو میتونید ببینید . مقدار type مشخص کننده نوع کاری هست که میخوایم با dispatch کردن اون Action انجامش بدیم.

داخل payload هم میتونیم اطلاعات مورد نیاز اون Action رو بریزیم. مثلا اگر یک Action برای ثبت نام کاربر داشته باشیم ، داخل payload اطلاعات کاربر رو میتونیم بریزیم مثل نام و فامیل شخص .

تو تیکه کد زیر یک مثال براتون آماده کردم که از هوک useReducer برای ذخیره یک عدد استفاده کردیم.

یک Action برای Reset کردن مقدار ذخیره شده داریم و یک Reducer که وظیفه دریافت Action ،انجام عملیات و return کردن مقدار جدید رو داره.
یک مثال از هوک ()useReducer در React

`// reducer Function
function reducer(state, action) {
switch (action.type) {
// ...
case 'reset':
return { count: action.payload };
default:
throw new Error();
}
}
const initialCount = 0;
// use useReducer and set reducer,initialState to it
const [state, dispatch] = useReducer(reducer, initialCount, initFunc);

// Updating State With Dispatch reset Action
dispatch({type: 'reset', payload: initialCount})}> Reset `

تو خط 13 تیکه کد بالا ، با استفاده از هوک useReducer در React یک state برای ذخیره مقدار و یک dispatch برای بروزرسانی مقدار ایجاد کرده ایم .

به useReducer یک مقدار اولیه دادیم به نام initialCount که مقدارش 0 هست.

همچنین به useReducer یک تابع دادیم که وظیفه بررسی Action های ارسال شده بهش و Return مقدار جدید رو داره ( این تابع در خط 2 ایجاد شده )

تو تابع reducer ، مقدار action.type رو چک کردیم که بتونیم با توجه به نوع action تصمیم مناسب رو بگیریم . در اینجا گفتیم اگر اکشن ما reset بود ، مقداری که داخل payload برامون فرستاده شده رو برای count قرار بده. ( چون داخل payload برای ما initialCount فرستاده شده پس مقدار 0 اینجا قرار میگیره و در نتیجه مقدار state ریست میشه )

تو خط 16 هم یک دکمه برای reset کردن قرار دادیم و گفتیم اگر روی این دکمه کلیک شد ، Action مشخص شده رو dispatch کن.

تو خط 16 (هنگام dispatch ) علاوه بر مشخص کردن action type ، یک action payload هم مشخص کردیم که برای reducer فرستاده بشه.
شعور ()useReducer !

هوک useReducer باشعوره . اگه مقداری که useReducer برمیگردونه ( return میکنه ) با مقدار فعلی state برابر باشه ، هیچ رندر مجددی صورت نمیگیره .
یه مثال کامل از هوک useReducer ری اکت

خب حالا که با هوک useReducer آشنا شدین ، بریم یه مثال کامل ازش ببینیم .

تو این مثال میخوایم یه Counter App بسازیم.

میخوایم 3 تا دکمه برای افزایش مقدار ، کاهش مقدار و ریست مقدار داشته باشیم :

`import React, { useReducer } from 'react';

const initialState = { count: 0 }
// The reducer function
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 }
case 'decrement':
return { count: state.count - 1 }
case 'reset':
return {count: state.count = 0}
default:
return { count: state.count }
}
}

const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState)

return (

مقدار فعلی : {state.count}

dispatch({ type: 'increment' })}> افزایش
dispatch({ type: 'decrement'})}> کاهش
dispatch({ type: 'reset'})}> ریست

);
};

export default Counter;`

تو مثل بالا 3 تا دکمه داریم که با کلیک کردن روی هرکدوم یک Action رو Dispatch میکنیم.

دکمه افزایش برای increment کردن ، دکمه کاهش برای decrement کردن و دکمه reset برای ریست مقدار.

تو خط 19 یک مقدار اولیه ( initialState ) مشخص کردیم که مقدارش 0 هست. همچنین یک تابع reducer مشخص کردیم .

این تابع reducer در خط 5 تعریف شده و وظیفش بررسی کردن نوع Action ( توسط Switch ) هست و با توجه به نوع Action مقدار فعلی رو تغییر میده و مقدار جدید رو Return میکنه.

ما اینجا 3 نوع Action داریم ( increment,decrement,reset ) ولی ممکنه شما نیاز به Action های بیشتر با قابلیت های بیشتری داشته باشید .

لطفا برای مطالعه ادامه این مقاله + تیکه کد ها و مثالهای بیشتر روی لینک زیر کلیک کنید :
useReducer در ریکت

هوک useCallback ری اکت و بررسی تخصصی React.useCallback

FrontEndi — Fri, 10 Nov 2023 18:19:32 +0000

هوک useCallback ری اکت یکی از مهمترین هوک هایی هست که هر React Developer ، باید تسلط خوبی بهش داشته باشه . در واقع هوک useCallback تو بحث Performance به ما کمک میکنه تا سایت بهینه تری داشته باشیم.
هوک useCallback ری اکت

هوک useCallback ، توابع ( function ) های شمارو کش میکنه و در هر re-Render اون توابع مجدد ساخته ( re-Creation ) نمیشن ! و از حافظه cashe خونده میشن .

هوک useCallback در ری اکت با جلوگیری از re-Render های اضافه و کاهش زمان re-Render ها باعث بهینه سازی و بهبود عملکرد اپیکیشن ما میشه.

عملکرد هوک useCallback تقریبا مثل هوک useMemo هست اما تفاوت هایی باهمدیگه دارن.

با فِرانت اِندی همراه باشید که میخوایم این هوک خفن رو تخصصی بررسی کنیم 🙂

اما قبل از اینکه بریم سراغ هوک ()useCallback لازمه با مفهوم Functions erquality آشنا باشید .
مفهوم Function equality به چه معناست ؟

برای فهمیدن اینکه useCallback دقیقا چیکار میکنه باید دو تا مفهوم رو باهم بررسی کنیم : referential equality و function equality ..

توابع یا همون Function ها تو جاوااسکریپت مثل Variable ها ( متغیر ها ) رفتار میکنن.

یعنی ما همونطور که میتونیم یک متغیر رو به عنوان آرگومان به تابع پاس بدیم ، میتونیم یک تابع رو هم به عنوان آرگومان به یک تابع پاس بدیم.

پس میتونیم با یک تابع مثل متغیر رفتار کنیم : یعنی به عنوان آرگومان به یک تابع بدیمش ، تابع رو تو یه تابع دیگه return کنیم ، بریزیمش داخل یک متغیر و درکل هربلایی که میشه سر یه variable اورد ، سر تابع هم میشه اورد!

به مثال زیر دفت کنید تا متوجه بشید :

`// Numbers function
function sumFunctionNumbers() {
return (a, b) => a + b;
}

const function1 = sumFunctionNumbers();
const function2 = sumFunctionNumbers();

function1(2, 3);
// expected output: 5
function2(2, 3);
// expected output: 5

console.log(function1 === function2);
// expected output: false`

تو تیکه کد بالا یه تابع ساختیم به اسم sumFunctionNumbers .

حالا این تابع رو ریختیم داخل 2 تا متغیر به اسم function1 و function2 .

تو خط 14 این 2 تابع که منطق یکسانی دارن رو باهم مقایسه کردیم ولی بهمون False برگردوند ! دلیل این موضوع این هست که این 2 تابع آدرس های متفاوتی در حافظه دارن و از دید جاوااسکریپت با همدیگه متفاوت هستن.

اما حقیقت موضوع اینه که این 2 تابع یکسان هستن ! خب حالا بریم سراغ هوک useCallback ری اکت …

هوک useCallback چیست ؟

تو ری اکت زمانیکه یک کامپوننت re-Render میشه ، تمامی function های موجود در اون کامپوننت مجدد ساخته میشن و یک جای جدید در حافظه اِشغال میکنن.

هوک useCallback از تابع شما یک instance ( نمونه ) میسازه و تا زمانیکه dependencies های اون تغییر نکنه ، تو re-Render های بعدی به هیچ عنوان تابع شما مجدد ساخته نمیشه و جای جدید در حافظه اِشغال نمیکنه:

const x = useCallback(callback, dependencies)

تو تیکه کد بالا نحوه استفاده از هوک useCallback در react مشخص شده .

تو بخش callback باید تابع خودتون و تو بخش dependenies باید مواردی رو ذکر کنید که میخواید در صورت تغییر پیدا کردنشون ، تایع شما مجدد ساخته بشه. در نهایت یک تابع memo شده return میشه که داخل متغیر x ذخیره میشه .

استفاده از هوک useCallback در ری اکت بشدت کاربردی و مهمه !!

چون بجای ساختن function های موجود در کامپوننت در هر re-Render ، فقط زمانی که dependencies ها تغییر میکنن اون توابع مجدد ساخته میشن.

تو تیکه کد زیر ما یک تابع memo شده به کمک useCallback ساختیم که در هر بار re-Render مجدد ساخته نمیشه !

`const momoizedFunction = useCallback(() => {
// the callback function to be memoized
},

[]); // dependencies array`

چه زمانی از هوک ()useCallback استفاده کنیم ؟

هر زمان تغییر نتیجه State کامپوننت پدر ، در کامپوننت فرزند تاثیر گذار نیست باید از هوک useCallback استفاده کرد .

یعنی فرض کنید State کامپوننت پدر تغییر میکند. اگر این تغییر state هیچ ارتباطی به کامپوننت فرزند ندارد باید از هوک useCallback استفاده کرد .

اما درصورتیکه این تغییر State باعث تغییر نتیجه در کامپوننت فرزند میبشود ، پس نیازی به useCallback نیست و باید اجازه دهیم re-Render و re-Creation رخ دهد .
چه زمانی از هوک ()useCallback ری اکت استفاده نکنیم ؟

برخی هوک ها خیلی مفید و کاربردی هستن ولی دلیل نمیشه که ازشون هرجایی بصورت بی رویه و بدون دلیل استفاده کنیم !

اتفاقا استفاده بی رویه از هوک های مفید ( مثل هوک useMemo ) قطعا تاثیرات منفی روی Performance اپیکیشن شما داره.

در برخی موارد نیازی به useCallback ری اکت نیست و بهتره اجازه بدیم با هربار re-Render ، توابع ما مجدد ساخته بشن.

استفاده بی رویه از هوک ()useCallback در درجه اول باعث پیچیدگی کد اپیکیشن شما میشه .

ضمن اینکه با هر بار re-Render شدن کامپوننت ، useCallback اجرا میشه و Dependencies هارو چک میکنه که تغییری داشتن یا بدون تغییر بودن. همین پروسه خودش هزینه داره و زمانبر هست.

تو مثال زیر نیازی به هوک useCallback در react نداریم و نباید ازش استفاده میکردیم :

`export default function App() {

const clickHandler = useCallback(() => {
// handle the click event
}, []);

return ;
}

const ButtonWrapper = ({ clickHandler }) => {
return Child Component;
};`

تفاوت useCallback و useMemo چیست ؟

برای مطالعه ادامه این مقاله + مثالها و تیکه کد های بیشتر روی لینک زیر کلیک کنید :
useCallback در ریکت

هوک useState ری اکت و بررسی تخصصی ()React.useState

FrontEndi — Fri, 10 Nov 2023 18:16:30 +0000

هوک useState ری اکت به ما این امکان رو میده که حالت ها و مقادیر کامپوننت خودمون رو در جایی ذخیره کنیم. این حالت ها (stateها) میتونن از هر نوعی ( string,number,array,object و..) باشن .

با ذخیره کردن این state ها ، میتونیم تو کل اون کامپوننت ازشون مثل یه متغیر استفاده کنیم و هر زمان نیاز داشتیم مقدارشون رو بروزرسانی کنیم .

هوک useState چطور کار میکنه ؟

با ساختن هر state ( توسط useState ) باید یک مقدار اولیه به اون state بدید .

مثلا اگه میخواید Theme اپیکیشن رو داخل state ذخیره کنید ، باید مشخص کنید که مقدار اولیه Theme چی باشه ؟!

تو مثال زیر ما به کمک هوک useState حالت اپیکیشن رو ذخیره کردیم.
(تو این مثال از theme برای دسترسی به مقدار و از setTheme برای بروز کردن مقدار استفاده میکنیم ):

const [theme,setTheme] = useState('DarkMode')

اگه کد بالارو کامل متوجه نشدید ، اصلا نگران نباشید و با فِرانت اِندی همراه باشید که میخوایم حسابی بررسیش کنیم 🙂

هوک useState ری اکت چیست ؟

هوک useState یکی از مهمترین هوک های ری اکت هست که به ما اجازه میده حالت های کامپوننت خودمون رو ذخیره و مدیریت کنیم . حالا شاید بپرسید حالت کامپوننت یعنی چی ؟

فرض کنید توی کامپوننت خودمون باید نام کاربر یا شماره تلفنش رو در جایی ذخیره کنیم . خب هرکدوم از اینها یک حالت ( state ) هستن که هوک useState ری اکت به ما امکان ذخیره و بروزرسانی این مقادیر رو میده.

برای ذخیره کردن نام کاربر باید بصورت زیر عمل کنیم :

const [name,setName] = useState('احمد')

برای استفاده از نام کاربر تو کامپوننت خودمون ، باید از name استفاده کنیم . مثل مثال زیر :

<div>{name}</div>

برای تغییر یا بروزرسانی مقدار name به یک مقدار جدید ( مثلا تغییر احمد به حسین ) باید بصورت زیر عمل کنیم :

setName('حسین')

در واقع React.useState به ما 2 امکان میده :

امکان خواندن مقدار ذخیره شده .
امکان بروزرسانی مقدار ذخیره شده.

هوک useState ری اکت چه مقادیری رو میتونه ذخیره کنه ؟

هوک useState در React به ما اجازه ذخیره هر نوع مقداری با هر نوعی رو میده !

مثلا شما میتونید انواع مختلف دیتا های primitive مثل String , Number , Boolean رو داخلش ذخیره کنید . همچنین امکان ذخیره کردن دیتا های Complex مثل Array و Object ، تابع ، و دیتا تایپ های اختصاصی روهم دارید.

یا بزارید اینجوری بگم :

هرچیزی که داخل متغیر های جاوااسکریپت میتونید ذخیره کنید ، داخل State هم میتونید 🙂

اما بروزرسانی Object و Array کمی متفاوت تره !

تو ری اکت انواع مختلف دیتا رو میشه بصورت مستقیم بروزرسانی کرد ( مثل مثال های بالا )

اما برای Object و Array نمیشه مستقیما بروزرسانی رو انجام داد . ( بخاطر بحث immutability که بعدا راجبش صحبت میکنیم )

برای بروزرسانی Object یا Array باید بصورت زیر عمل کنید :

یک کپی از Object یا Array موجود در state بگیرید .
تغییرات خودتون رو روی اون Object یا Array کپی شده اعمال کنید .
حالا توسط setState آبجکت یا آرایه بروز شده رو در state ذخیره کنید .

تو دستورالعمل بالا ما مستقیما مقدار State خودمون با نوع Object یا Array رو آپدیت نمیکنیم !

یک کپی از اون مقدار میگیریم و هر تغییری که لازم داریم رو روی اون مقدار کپی شده لحاظ میکنیم .

حالا مقدار کپی شده که تغییرات رو هم شامل شده ، توسط setState جایگزین مقدار قبلی در state میکنیم .

تو مثال زیر یه State با نوع Object رو بروزرسانی میکنیم :

`const [state, setState] = useState({ name: 'Fatemeh', age: 21 });

const updateAge = () => {
setState({ ...state, age: 22 });
};`

تو مثال بالا یه State داریم که یک Object به عنوان مقدار اولیه ( InitialState ) بهش دادیم . این آبجکت شامل نام و سن هست که نام از نوع رشته و سن از نوع عدد هستن.

تابع updateAge برای بروزرسانی اطلاعات این State هست که داخلش setState رو صدا زدیم .

با state… میتونیم یک کپی از مقدار state بگیریم ، حالا چون مقدار age تغییر کرده پس در کنارش مقدار جدید رو هم قرار میدیم .

یعنی تو خط 4 گفتیم : از هرچی تو state هست یه کپی بگیر ، حالا مقدار age رو توی ورژن کپی شده تغییر بده . در نهایت با setState این مقدار بروز شده رو set کن .

تو مثال زیر یه state با نوع Array رو بروزرسانی میکنیم :

`const [array, setArray] = useState([1, 2, 3, 4, 5]);

const addItem = () => {
setArray([...array, 6]);
};`

تو مثال بالا یک state از نوع Array داریم .

تو خط 4 یک کپی از array گرفتیم و مقدار 6 رو به این آرایه اضافه کردیم و در نهایت توسط setArray این مقدار بروزر شده رو set کردیم .

چه زمانی باید از ()React.useState استفاده کنیم ؟

بطور کل زمانیکه میخوایم حالت ها یا مقادیر مرتبط به یک کامپوننت رو بصورت داخلی ذخیره کنیم ، باید از هوک ()useState استفاده کنیم .

اما اگه حالت یا وضعیتی که میخوایم ذخیره کنیم داخلی نیست ، باید از State Management هایی مثل Redux استفاده کنیم. ( داخلی نیست یعنی از یه state تو کل اپیکیشن و کامپوننت های مختلف استفاده کنیم )
چطور از ()useState استفاده کنیم ؟

برای استفاده از این هوک خفن باید اون رو import کنیم ( فراخوانی کنیم ) :

import React, { useState } from 'react';

چه زمانی باید از ()React.useState استفاده کنیم ؟

برای استفاده از این هوک خفن باید اون رو import کنیم ( فراخوانی کنیم ) :

import React, { useState } from 'react';

مقدار اولیه useState یا همون initialState چیه ؟

همونطور که قبلا هم گفتیم ، موقع استفاده از هوک useState باید یک مقدار اولیه بهش بدیم .

اما یه جاهایی از مقدار اولیه خبر نداریم !!

مثلا قراره از یک API ، مقداری رو بگیرید و داخل state بعنوان initialState قرار بدید . و خب چون نمیدونیم مقداری که اون API میخواد برگردونه چیه و چقدر زمان میبره ، نمیتونیم موقع تعریف بهش مقداری رو به عنوان مقدار اولیه بدیم .

در اینجا از تکنیکی به عنوان Lazily Initialize استفاده میکنیم .

در واقع Lazily Initialize مواقعی کاربرد داره که مقدار اولیه ما با تاخیر باید Initialize ( مقدار دهی اولیه ) بشه .

تو مثال زیر از useState استفاده کردیم اما بعنوان مقدار اولیه ، یک Function بهش دادیم :

const userDetail= () => { const [state,setState] = useState( () => myApiCallFunction() ); }

تو مثال بالا یه نکته مهم وجود داره ، اینکه مقدار اولیه ای که با تکنیک Lazily Initialize قرار دادیم ، فقط در render اولیه قرار میگیره.

بروزرسانی State با setState در ری اکت !

هوک useState از ما 2 آرگومان میگیره . مقدار اول برای خواندن مقدار اون state و مقدار دوم یک تابع برای بروزرسانی مقدار اون state هست .

تو مثال زیر یک کامپوننت به اسم User داریم و قراره نام کاربر رو داخل یک State به نام name ذخیره کنیم . دقت کنید که این مقدار توسط یک Input از خود کاربر دریافت میشه و توسط onChange داخل state قرار میگیره .

بروزرسانی State با setState در ری اکت !

`const User = () => {
const [name,setName] = useState('');

return (

type="text"
value={name}
onChange={e => setName(e.target.value)}
placeholder="نام خودتون رو وارد کنید"
/>

میباشد.{name}نام شما

);
}; //`

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

مثلا میخوایم با هربار کلیک روی دکمه ، مقدار state به علاوه 1 بشه . انجام اینکار مستلزم بررسی مقدار قبلی state هست .

تو مثال زیر همون مثال بالایی رو اوردیم ، با این تفاوت که قراره با توجه به مقدار قبلی state ، عملیات setState رو انجام بدیم :

`const User = () => {
const [name,setName] = useState('');

return (

type="text"
value={message}
onChange={(e)=>setName(prev=>prev+e.target.value)}
placeholder="نام خودتون رو وارد کنید"
/>

میباشد.{name}نام شما

);
}; //`

استفاده از هوک useState برای ذخیره کردن Object

برای مطالعه ادامه این مقاله + تیکه کد ها و مثالهای بیشتر در وبسایت فِرانت اِندی روی لینک زیر کلیک کنید :

useState در ریکت

هوک useMemo و بررسی تخصصی ()React.useMemo در ری اکت

FrontEndi — Fri, 10 Nov 2023 18:10:30 +0000

زمانیکه نسخه 16.8 ری اکت منتشر شد یه عالمه هوک باحال بهش اضافه شد مثل هوک useMemo ! در حقیقت هوک useMemo ری اکت به بهینه سازی اپیکیشن ما و بهبود Performance پروژمون کمک میکنه.

امروز میخوایم بصورت تخصصی هوک useMemo ری اکت رو بررسی کنیم و ببینیم که کجاها باید از این هوک استفاده کرد و چه جاهایی نباید ازش استفاده کرد!
اصلا Memoization چی هست و چرا باید ازش استفاده کنیم ؟

زمانیکه وضعیت / state یک کامپوننت تو ری اکت تغییر میکنه ، ری اکت اون کامپوننت و همه فرزندانش ( کامپوننت های فرزند ) رو re-Render میکنه.

گاهی اوغات ممکنه کامپوننت فرزند هیچ تغییری نکرده باشه ولی به این دلیل که کامپوننت پدر تغییر حالتی داشته ، ری اکت کامپوننت پدر و تمامی کامپوننت های فرزند رو re-Render میکنه ( بدون توجه به اینکه کامپوننت های فرزند بدون تغییر بودن )

چنین re-Render های بیهوده ای قطعا هزینه بر هستن و Performance اپیکیشن مارو کاهش میدن .

به عنوان یک Front-End Enginner باید تمام تلاش خودمون رو بکنیم که یک اپیکیشن بهینه، با Performance عالی داشته باشیم .

خود ری اکت برای حل این مشکل memo رو معرفی کرد . اگه با memo آشنایی ندارید حتما قبل از ادامه دادن این مقاله ، ابزار ()memo و بررسی تخصصی React.memo رو مطالعه کنید چون هوک useMemo بر پایه ابزار memo نوشته شده .

هوک useMemo چیست ؟

هوک useMemo در ری اکت نتیجه یک تابع رو برای بار اول محاسبه میکنه و نتیجش رو داخل حافظش ذخیره میکنه.

حالا تو re-Render های بعدی ، اون تابع اجرا نمیشه و هیچگونه محاسبه جدیدی انجام نمیده و همون نتیجه ای که قبلا داخل حافظه ذخیره کرده بودیم رو برمیگردونه ( تا زمانیکیه ورودی های تابع تغییر کنه )

خب این فوق العادس 🙂 چرا ؟

چون برخی تابع ها خیلی سنگین هستن و محاسبات پیچیده ای دارن. به کمک هوک ()useMemo میتونیم یکبار این تابع رو render کنیم و نتیجش رو داخل حافظه بسپریم. تو re-Render های بعدی دیگه این تابع محاسبه نمیشه و از همون نتیجه ای که داخل حافظه داریم استفاده میکنیم .
با Memoization میتونی پروژت رو خیلی خیلی بهینه تر کنی !

تکنیک Memoization به شما کمک میکنه Performance اپیکیشن خودتونو بشدت بهبود بدید.

اما یه نکته خیلی مهم اینجا وجود داره :

از هوک ()useMemo فقط برای محاسبات سنگین و پیچیده استفاده کنید !

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

در حقیقت خود useMemo داره یکسری محاسبات انجام میده و اگه از useMemo برای جاهایی که نیاز به Memoization نداریم استفاده کنیم ، در حقیقت کلی محاسبه اضافی به پروژمون اضافه کردیم .

بطور مثال تو کامپوننت زیر از useMemo برای یک تابع خیلی ساده استفاده کردیم که اینجا اصلا نیازی به Memoization نداریم !

`const App({name, family}) {
const createFullName = useMemo(() => {
return name+family
}, [name, family]) // اینجا مواردی رو مشخص میکنیم که میخوایم درصورت تغییر مقدار ، تابع مجدد اجرا بشه

return
}`

تو کامپوننت بالا ، تابع createFullName هزینه محاسباتی سنگینی نداره و نباید اینجا از useMemo استفاده میکردیم.

اما اتفاقی که تو کامپوننت بالا میوفته این هست که نتیجه تابع createFullName یکبار محسابه میشه و تو حافظه ذخیره میشه و تا زمانی که name و family تغییری نکنن ، این تابع re-Render و محاسبه مجدد نخواهد شد.

حالا بیاید به حالت ساده این کامپوننت نگاهی بندازیم :

`const App({name, family}) {
const createFullName = ()=> {
return name+family
}

return
}`

ما یه تابع رو به 2 صورت داریم . با useMemo و بدون useMemo !

اما واقعا از کدوم باید استفاده کنیم ؟!

پاسخ ساده به این سوال این هست که اگه محاسبه و نتیجه اون تابع ساده هست ، نیازی به useMemo ندارید اما اگه هزینه محاسباتی اون تابع بالاست ، بهتره که از useMemo استفاده کنید .

همچنین همیشه به نتیجه اون تابع هم دقت کنید . اگه نتیجه اون تابع ( مقداری که return میشه ) از مقادیر ساده جاوااسکریپتی هست ( primitive ) پس نیازی به useMemo نیست ( نوع دیتا primitive مثل string , number , boolean , null ,undefind )

نحوه استفاده از هوک ()useMemo

کد زیر ، یک مثال خیلی ساده از نحوه استفاده از هوک ()useMemo در ری اکت هست :

const cachedValue = useMemo(function,dependencies)

خود هوک useMemo ، دو مقدار اصلی از ما دریافت میکنه .

مقدار اول یک تابع / Function هست و در حقیقت همون تابعی هست که هزینه محاسباتی بالایی داره و میخوایم از اجرای مجددش در هربار re-Render جلوگیری کنیم .

مقدار دوم dependencies هست. تو بخش dependencies باید لیست متغیر هایی رو قرار بدیم که میخوایم با تغییر پیدا کردن مقدارشون ، تابع ما مجدد محاسبه بشه . ( با فرمت آرایه )

نتیجه این function در متغیری به نام cashedValue ذخیره میشه که از اون میتونیم در هر کجا از اپیکیشن خودمون استفاده کنیم . نکته این هست که این تابع برای بار اول محاسبه میشه و مقدارش در cashedValue ذخیره میشه و تا زمانیه dependencies ها تغییر پیدا نکنن ، این تابع مجدد محاسبه نمیشه .

اتفاقی که در re-Render های بعدی میوفته این هست که :

ری اکت به dependencies های useMemo نگاه میکنه که ببینه آیا این dependencies ها نسبت به render قبلی فرق کردن یا نه ؟

اگه تفاوتی نداشتن ، از همون مقدار memo شده ( به حافظه سپرده شده ) استفاده میکنه .

اما اگه تفاوت داشتن ، مجدد اون تابع رو محاسبه میکنه.

تفاوت هوک useMemo با memo در ری اکت چیست ؟

لطفا برای مطالعه ادامه این مقاله + تیکه کد ها و مثالهای بیشتر روی لینک زیر کلیک کنید :
useMemo در ریکت

ابزار ()memo و بررسی تخصصی React Memo !

FrontEndi — Fri, 10 Nov 2023 18:07:13 +0000

ابزار memo ری اکت یکی از مهمترین قابلیت هایی هست که تو بحث بهینه سازی میتونیم ازش استفاده کنیم.

در حقیقت memo به ما اجازه میده از re-Render اضافی کامپوننت تا زمانیکه Props اون تغییری نکرده، جلوگیری کنیم.

چه حسی از این بهتر که وقتی کاربر آدرس سایت شمارو میزنه کمتر از 100ms بتونه سایت رو ببینه ؟! و چه حسی بدتر از اینکه زمان Load سایت به 300ms برسه ؟

قطعا نمیشه اهمیت بهینه سازی ( Performance ) تو وبسایت رو نادیده گرفت یا انکار کرد .

اگه شماهم مثل من یه React Developer هستی باید با ابزار ()memo تو React خیلی خوب آشنا باشی و بدونی چطور باید ازش کمک بگیری تا بتونی Performance اپیکیشن خودت رو به حداکثر میزان ممکن برسونی 🙂

چند روز پیش راجب Lazy Load تصاویر ری اکت صحبت کردیم که اونم در رابطه با Performance وبسایت های ری اکتی بود و امروز میخوایم بصورت تخصصی راجب ویژگی ()memo صحبت کنیم .

برای اینکه بدونیم ویژگی قابلیت memo چیه و چطور کار میکنه ، لازمه بدونیم دام مجازی ری اکت چطور کار میکنه . (مطالعه کنید : دام مجازی ری اکت )

زمانی که حالت یکی از Element های DOM تغییر میکنه ، ری اکت اون تغییر رو render میکنه و با render قبل از تغییر مقایسه میکنه .

اگه تو این مقایسه اِلِمانی تغییر کرده باشه ، Element تغییر پیدا کرده داخل DOM بروزرسانی میشه .

این اتفاق با سرعت خیلی زیادی رخ میده ، اما به کمک ابزار ()React.memo میتونیم این سرعت رو بیشتر هم بکنیم .

اگر ما یک کامپوننت رو داخل ()memo بزاریم ، ری اکت اون کامپوننت رو render میکنه و نتیجه ی render رو به حافظش میسپاره !

حالا اگه اون کامپوننت نیاز به re-Render داشته باشه ، ری اکت اول props های اون کامپوننت رو با props های اون کامپوننتی که تو حافظش ذخیره کرده چک میکنه.

اگه props ها یکسان باشن ، ری اکت همون کامپوننتی که تو حافظش ذخیره کرده بوده رو نشون میده و دیگه re-Render صورت نمیگیره !

اجازه بدید memo رو تو واقعیت ببینیم 🙂

`export function Music({ title, description }) {
return (

Music title: {title}
Desc: {description}

);
}

export const MemoizedMusic = React.memo(Music);`

تو تیکه کد بالا ، ما کامپوننت Music رو داخل ()React.memo قرار دادیم .

اگه به خط 10 دقت کنید میبینید که React.memo(music) یک مقدار جدید Return کرده به اسم MemoizedMusic .

در واقع خروجی کامپوننت MemoizedMusic با خود کامپوننت Music کاملا یکسانه ! با این تفاوت که کامپوننت MemoizedMusic فقط یکبار render میشه و تا زمانی که props هاش تغییر نکنه ، re-Render نمیشه !

اما کامپوننت Music هر بار render میشه ( فارغ از اینکه props های اون تغییر میکنه یا نه )

`// اولین رندر => این کامپوننت به حافظه ری اکت میره و ذخیره میشه
title="تنها در خانه"
description="فیلم خوبیه"
/>

// دومین رندر => چون پراپس های این کامپوننت تغییر نکرده ، مجدد رندر نمیشه و از حافظه فراخوانی میشه
title="تنها در خانه"
description="فیلم خوبیه"
/>`

تو تیکه کد بالا ما 2 بار کامپوننت MemoizedMusic رو فراخوانی کردیم ولی فقط 1 بار render میشه .

ری اکت دفعه اول که به این کامپوننت برمیخوره ، اون رو render میکنه و تو حافظه خودش نگه میداره.

دفعه بعدی که همون کامپوننت رو فراخوانی کردیم ، چون props هاش تغییری نکردن ، پس مجدد رندر نمیکنه و فقط از حافظش همون رو فراخوانی میکنه .

به همین سادگی شما میتونید کلی نقش مثبت تو Performance اپیکیشن خودتون داشته باشید 🙂
بررسی دستی یکسان بودن Props ها در memo

علاوه بر اینکه ری اکت خودش میتونه اینکار رو بکنه ، شما میتونید خودتون یک Fumction اختصاصی بنویسید و اون رو به memo پاس بدید:

React.memo(Component, [CheckPropsEqual(prevProps, nextProps)]);

تو تیکه کد بالا ، خودمون یک کامپوننت CheckPropsEqual نوشتیم که دو Props به عنوان ورودی میگیره و چک میکنه که آیا Props ها یکسان هستند یا خیر .

نتیجه باید boolean ( true/false ) باشه . نتیجه True به معنی مساوی بودن Props ها هست .

چه زمانی از ()React.memo استفاده کنیم ؟

1 – جاهایی که فکر میکنید کامپوننت با Props های یکسان render میشه !

یکی از بهترین جاهایی که میشه از react.memo استفاده کرد ، کامپوننت هایی هستن که اغلب با Props های یکسان render میشن !

بیاید یک سناریویی رو در نظر بگیریم که یک سایت مشاهده موزیک داریم که بصورت لحظه ای ، میزان نمایش دانلود موزیک رو به کاربر نشون میدیم . ( یعنی هر چند ثانیه یکبار به back-end درخواست میدیم و اطلاعات جدید رو میگیریم )

function MusicViewsRealtime({ title, releaseDate, views }) { return ( <div> <Music title={title} releaseDate={releaseDate} /> Music Download: {views} </div> ); }

اتفاقی که میوفته :

`// بار اول
views={0}
title="Forrest Gump"
releaseDate="June 23, 1994"
/>

//بعد چند ثانیه ، بازدید ده
views={10}
title="Forrest Gump"
releaseDate="June 23, 1994"
/>

// بعد چند ثانیه ، بازدید بیست و پنج
views={25}
title="Forrest Gump"
releaseDate="June 23, 1994"
/>

// ادامه .. .`

اتفاقی که میوفته این هست که مقدار views هر چند ثانیه یکبار داره آپدیت میشه و کامپوننت MusicViewsRealtime هر بار re-Render میشه . که باعث میشه کامپوننت Music هم re-Render بشه ( درصورتی که کامپوننت Music هیچ تغییری نداشته ! )

در حقیقت props های کامپوننت Music هیچ تغییری نکردن ، ولی هر دفعه داره re-Render براش رخ میده .

اینجا همون جاییه که باید از React.memo استفاده کنیم :

function MusicViewsRealtime({ title, releaseDate, views }) { return ( <div> <MemoizedMusic title={title} releaseDate={releaseDate} /> Music Download: {views} </div> ); }

با memo کردن کامپوننت Music ، دیگه هر چند ثانیه یکبار re-Render نمیشه چون Props های اون تغییری نمیکنه.
چه زمانی از ()React.memo استفاده نکنیم ؟

اگه کامپوننت شما معمولا با Props های مختلف render میشه یا خیلی سبکه ، نیازی به استفاده از memo ری اکت ندارید .

چطور استفاده اشتباه از memo باعث کاهش Performance اپیکیشن میشه ؟

فرض کنید یک کامپوننتی رو به memo دادید که همیشه Props های متفاوتی داره .

با انجام اینکار ، ری اکت هربار که Props های این کامپوننت رو با نسخه کش شده بررسی میکنه ،همیشه به false میرسه ( یعنی Props ها متفاوت هستن ! )

و خب اینجا یعنی ری اکت یک مرحله مقایسه اضافه انجام داده که خودش باعث کاهش Performance اپیکیشن میشه .

نه تنها هیچ مزیتی بدست نمیارید ، کلی قضیه رو پیچیده تر هم میکنید !

Memo در ری اکت

لطفا برای مطالعه ادامه این مقاله + تیکه کد و مثالهای بیشتر روی لینک زیر کلیک کنید :
memo در ریکت

هوک useContext ری اکت و بررسی تخصصی Context API ری اکت !

FrontEndi — Sat, 16 Sep 2023 13:14:38 +0000

هوک useContext ری اکت ، یکی از مهمترین و پرکاربرد ترین هوک هایی هست که هر ری اکت دِوِلوپری باید درک عمیقی نسبت بهش داشته باشه 🙂

پس آماده باشید که بریم تخصصی Context Api ری اکت رو بررسی کنیم …
هوک useContext چیست ؟

قبل از هر صحبتی ، بهتره ببینیم خود React چه تعریفی از این هوک داره :
هوک useContext ری اکت ، یک روش برای انتقال داده ها بین کامپوننت های مختلف اپیکیشن، بدون استفاده از Props هست .

انتقال داده تو ری اکت بین کامپوننت های مختلف به 2 روش انجام میشه :

به تصویر بالا دقت کنید . . .
انتقال داده به روش React Props

تو این روش اگر نیاز باشه که دیتایی رو از کامپوننت 1 به کامپوننت 4 انتقال بدیم باید مراحل زیر رو طی کنیم :

انتقال Data از کامپوننت 1 به 2

انتقال Data از کامپوننت 2 به 3

انتقال Data از کامپوننت 3 به 4

بزرگترین مشکلی که تو این روش داریم ، اینه که دیتای ما داره به کامپوننت هایی ارسال میشه که تو اون کامپوننت ها اصلا به اون دیتا ها نیاز نداریم !!

در واقع تو کامپوننت 2 ما نیازی به اون دیتا ها نداریم ولی برای اینکه بتونیم دیتای خودمون رو به کامپوننت شماره 4 برسونیم ، باید از کامپوننت شماره 2 و 3 هم عبورشون بدیم .

حالا فرض کنید تعداد کامپوننت های درخت ما 20 تا باشه و بخوایم یه دیتایی رو از کامپوننت 1 به آخرین فرزند این درخت ( کامپوننت 20 ) بفرستیم ، اینجوری باید اون Data رو از طریق تک تک Component ها انتقال بدیم .

به اینکار میگن Props Drilling و اصلا اصلا پیشنهاد نمیشه !

اما خبر خوب اینه که یه روش بهتری برای اینجور وقتا داریم به اسم Context یا همون useContext 🙂

انتقال داده به روش React Context

اگه به تصویر بالا دقت کنید ، یک Context ساختیم که نقش منبع دیتا رو ایفا میکنه .

حالا از تمامی کامپوننت هایی که داریم ، میتونیم به این منبع Data بصورت مستقیم دسترسی داشته باشیم .

دیگه اینجا مشکل Props Drilling نداریم !

خیلی راحت از کامپوننت شماره 4 به Data مورد نیاز دسترسی پیدا کردیم، بدون اینکه اون Data رو وارد کامپوننت های دیگه بکنیم .

در حقیقت React Context یک روش انتقال داده بین کامپوننت های مختلف اپیکیشن شماست بدون توجه به عمق اون Component !
موارد استفاده از Context Api کدامند ؟

از Context در ری اکت برای به اشتراک گذاری دیتا های Global مثل تنظیمات کاربر ، تم ( دارک مود و لایت مود ) و … میشه استفاده کرد.

ایده اصلی Context این هست که به ما اجازه میده یک مقدار رو بین کامپوننت های مختلف به اشتراک بزاریم و هر زمان این مقدار تغییر کرد ، اون کامپوننتی که از مقدارمون استفاده کرده بوده ، مجدد رندر بشه .

در حقیقت بهتره بگیم از Context برای به اشتراک گذاری State هایی استفاده میکنیم که میخوایم تو بخش های مختلف اپیکیشن در دسترس باشن .

مواردی مثل :

تم سایت ( دارک مود / لایت مود )
تنظیمات سایت
نام و اطلاعات کاربر احراز شده ( وارد شده )
تنظیمات کاربر
زبان سایت ( سایت های 2 زبانه )

چطور از Context ری اکت استفاده کنیم ؟

برای استفاده از Context در React باید 3 مرحله انجام داد :

مرحله 1 – Create Context

برای اینکه یک Context بسازید ، میتونید از تابع داخلی خود ری اکت برای انجام اینکار استفاده کنید.

در واقع خود React یک تابع در اختیار ما گذاشته به نام createContext که بصورت زیر میتونیم ازش استفاده کنیم .

تابع createContext یک ورودی اختیاری از ما میگیره که میتونیم این مقدار رو هم بهش ندیم.

i`mport { createContext } from 'react'; // تابع خود ری اکت برای ساخت کانتکست

export const Context = createContext('یه مقداری');`

مرحله 2 – Providing The Context ( دسترسی دادن به مقدار Context )

برای اینکه بتونید از State یا مقدار ذخیره شده تو Context در کل اپیکیشن/کامپوننت ها استفاده کنید ، باید اون state/مقدار رو به کامپوننت های خودتون ارائه بدید ( Provide کنید ) .

به تیکه کد زیر دقت کنید تا توضیح رو هم بگم :

`import { Context } from './context'; // این همون کانتکستی هست که در تیکه کد قبلی ساختیمش

function App() {
const value = 'مقداری که میخوایم تو اپیکیشن ازش استفاده کنیم';
return (

);`
}

تو تیکه کد بالا ، ابتدا Contextی که ساخته بودیم رو import کردیم داخل روت پروژه ( فایل App.js )

داخل متغیر value مقداری رو مینویسیم که میخوایم تو کل اپیکیشن بهش دسترسی داشته باشیم مثل تنظیمات کاربر / حالت Theme ( دارک مود/لایت مود) و ..

حالا کل اپیکیشن رو به عنوان Children به Context.Provider میدیم . ( مطابق خط 6 )

در واقع تمامی کامپوننت هایی به مقدار value دسترسی دارن ( مقدار خط 4 ) که به عنوان فرزند Context.Provider قرار گرفتن . ( تو این مثال، کامپوننت MyComponent و تمامی فرزندانش به مقدار value دسترسی دارن )

برای مطالعه نسخه کامل و راستچین مقاله لطفا روی لینک زیر کلیک کنید :
useContext در ری اکت

دام مجازی ری اکت و بررسی تخصصی Virtual DOM ری اکت

FrontEndi — Sat, 16 Sep 2023 13:10:14 +0000

اگه شماهم یک React Developer تازه وارد هستید یا چندسال سابقه کار دارید ، ممکنه یک دید کلی از دام مجازی ری اکت ( React Virtual Dom ) داشته باشید ولی این کافی نیست !

حقیقتا به عنوان یک Front End Enginner باید درک عمیقی از React داشته باشید . از اونجاییکه دام مجازی یکی از مهمترین مباحث ری اکت هست ، لازم هست یکبار برای همیشه بدونیم که دام مجازی ری اکت چیه و چطور کار میکنه ؟

پس با فِرانت اِندی همراه باشید تا بصورت تخصصی بررسیش کنیم 🙂

قبل از بررسی تخصصی Virtual DOM ، بهتره بریم سراغ خود DOM و ببینیم DOM چیه .

DOM چیست ؟

دام مخفف عبارت Document Object Model هست . در واقع DOM نشان دهنده UI ( ظاهر ) وبسایت شماست و هربار که تغییری در سایت اعمال میشه ، DOM یکبار بروزرسانی میشه.

در حقیقت DOM یک ساختار درختی از تمامی Element ها و تگ های موجود در صفحه وب شماست.

به تصویر بالا دقت کنید .

کد سمت چپ ، کد Html صفحه شماست که به DOM سمت راست تبدیل شده . در واقع DOM یک ساختار درختی شکل از اجرای صفحه شما ( تگ ها ) میسازه .
یک مثال واقعی از DOM برای درک نقطه ضعف آن

فرض کنید داخل صفحه ای از سایتتون یک لیست 10 عددی از اطلاعات کاربران خودتون دارید و قصد دارید فقط اطلاعات کاربر اول رو ویرایش کنید .

پس از ویرایش اطلاعات کاربر اول ، تمام لیست 10 عددی در DOM بروزرسانی میشه !

و این اصلا خوب نیست !! چون شما فقط یک مورد رو ویرایش کردید و توقع دارید فقط همون کاربر در DOM بروزرسانی بشه اما تمامی لیست ( 10 کاربر ) بروزرسانی میشن !

این یعنی 9 برابر زمان بیشتر و بیهوده برای بروزرسانی UI !

اینجاست که ارزش واقعی Virtual DOM ری اکت ، به چشم میاد. دام مجازی ری اکت مشکلات DOM رو نداره و performance و سرعت فوق العاده ای داره.

دام مجازی ری اکت چیست ؟

بطور خلاصه و ساده Virtual DOM یک نسخه مجازی و کوچک شده از DOM اصلی وبسایت شماست که React از اون برای اعمال سریع تغییرات روی سایت استفاده میکنه.

انجام اینکار باعث میشه که فقط همان اِلِمانی که تغییر داشته ، در UI بروزرسانی بشه .

دام مجازی همانطور که از اسمش هم پیداست ، یک نسخه مجازی از DOM واقعیه .

هربار که چیزی ( اِلِمانی ) در وبسایت ما تغییر میکنه ، بجای اینکه DOM اصلی بروزرسانی بشه ، دام مجازی بروزرسانی میشه .

سالها پیش ( که هنوز کتابخانه های جاوااسکریپتی مثل ری اکت و انگولار وجود نداشتن ) چیزی به اسم Virtual DOM هم وجود نداشت.

اگه هنوز هم سری به سایتهای قدیمی بندازید میبینید هربار که سایت تغییری میکنه ( مثلا از صفحه ای به صفحه دیگر میرید ) کل صفحه Refresh میشه .

یا مثلا زمانیکه محصولی رو به سبد خرید خودتون اضافه میکنید ، بلافاصله کل صفحه Refresh میشه !

این اتفاق به این دلیل میوفته که مستقیما DOM داره بروزرسانی میشه . اما توی React به لطف وجود داشتن دام مجازی ، دیگه Refresh شدنی صورت نمیگیره . چون دام مجازی داره تغییر میکنه.

در React ، به ازای هر Element در DOM واقعی ، یک Element در دام مجازی وجود دارد . ( یعنی در ازای هر div در DOM ، یک div با همان خصوصیات و ویژگی ها در دام مجازی وجود دارد )

دام مجازی ( Virtual DOM ) یک مفهوم برنامه نویسیه که در آن یک نمایش مجازی از UI تو حافظه نگهداری میشه . همگام سازی این دام مجازی با دام واقعی تو ری اکت توسط کتابخونه ReactDOM انجام میشه . به این فرآیند در برنامه نویسی reconciliation میگیم .

تفاوت بروزرسانی DOM با VDOM ( دام مجازی )

بروزرسانی DOM خیلی کند و زمانبره اما در عوض بروزرسانی VDOM ( دام مجازی ) خیلی سریعتره !

چون در دام مجازی چیزی در صفحه ، نمایش داده نمیشه .

چرا Virtual DOM سریعتر است ؟

اینکه فقط بدونیم Virtual DOM از DOM سریعتره ، حقیقتا کافی نیست !

به عنوان یک Front-End Enginner باید دلیل سریعتر بودن دام مجازی رو بدونیم .

زمانیکه یک Element به UI وبسایت اضافه میشه ، بلافاصله یک دام مجازی ایجاد میشه ( با ساختار درختی که تصویرش بالاتر موجوده ).

به محض تغییر در خصوصیات یا حالات هرکدوم از این Element ها ، یک دام مجازی دیگه ایجاد میشه .

در این مرحله VDOM اول با VDOM دوم مقایسه میشه.

بعد از این مقایسه ، مشخص میشه که چه Element هایی تغییر داشتن و باید توی UI هم تغییر کنن .

در این مرحله دام مجازی بهترین و مناسبترین روش برای اعمال این تغییرات به DOM اصلی رو پیدا میکنه و اون تغییرات رو به DOM واقعی اضافه میکنه.

انجام اینکار باعث میشه که کمترین زمان و هزینه برای بروزرسانی DOM صورت بگیره .

توی تصویر زیر میتونید عملیات مقایسه دام مجازی 1 با دام مجازی 2 رو ببینید :

به تصویر بالا دقت کنید .

3 دام مجازی در این پروسه مشخص شده . دایره های آبی رنگ Element هایی هستند که در UI به کاربر نشان میدهیم .

دایره های سبز رنگ ، Element هایی هستن که تغییر وضعیت داشتن .

زمانیکه وضعیت یک Element تغییر میکنه ، بلافاصله یک VDOM ساخته میشه و بصورت کامل با VDOM قبلی مقایسه میشه .

نتیجه مقایسه VDOM اول ( دام قبلی ) با VDOM دوم ( دام فعلی ) یک VDOM جدید هست که وارد DOM واقعی میشه.

تا به اینجای کار باید درک درستی از نحوه کار Virtual Dom و تفاوتش با DOM بدست اورده باشید .

حالا وقتشه که بریم ببینیم ری اکت چطور از دام مجازی استفاده میکنه ؟

ری اکت چطور از Virtual DOM ( دام مجازی ) استفاده میکند ؟

ری اکت طی چند مرحله از دام مجازی استفاده میکند .

1 – ری اکت منتظر میمونه تا یک State تغییر پیدا کنه ( تغییر حالت یک Element )

در کتابخانه ری اکت به هر تیکه کد یک Component ( کامپوننت ) میگیم که هر کامپوننت یک یا چند State ( حالت ) داره .

زمانیکه State ( حالت ) یک کامپوننت تغییر میکنه ، ری اکت دام مجازی رو بروزرسانی میکنه. پس از بروزرسانی دام مجازی ، ری اکت نسخه قبلی VDOM را با نسخه فعلی VDOM مقایسه میکنه .

به این فرآیند diffing میگوییم .

پس از این مرحله ، حالا دیگه React میدونه که کدام Element ها تغییر حالت داشتن و فقط همان Element ها رو در DOM واقعی بروزرسانی میکنه.

انجام این پروسه در مقایسه با دستکاری مستقیم DOM ، بسیار کم هزینه تر و در مدت زمان کمتری صورت میپذیره .

همین عملکرد فوق العاده هست که React رو با سایر رقبای خودش مثل جی کوئری ، وردپرس و .. متمایز میکنه.
2- ری اکت تغییرات نهایی رو به DOM بصورت گروهی ارسال میکنه !

بروزرسانی DOM ، یکی از پرهزینه ترین مراحل تغییر حالت ( state ) اپیکیشن وب هست .

حالا فرض کنید به ازای هر تغییر کوچک ، ری اکت یک درخواست به DOM واقعی بابت بروزرسانی DOM بده !

اما خداروشکر اینطور نیست :/

ری اکت تضمین میکنه که تغییرات نهایی رو به DOM بصورت گروهی ارسال میکنه تا کمترین درخواست ممکن رو به DOM بابت بروزرسانی بده .
3- ری اکت از یک الگوریتم موثر برای پیدا کردن تغییر حالت ها استفاده میکنه ! ( شناسایی تغییر حالت Elements )

ری اکت برای اینکه بتونه تغییر حالات ( تغییر state ها ) رو تشخیص بده از یک الگوریتم اکتشافی با 2 خصوصیت زیر استفاده میکنه :

ذو Element با Type ( نوع ) متفاوت که درخت های مختلفی تولید میکنن.

خود React Developer مشخص کنه که کدام Element باید در تمامی re-Render ها در دسترس باشه . ( توسط ویژگی key )

برای مطالعه نسخه کامل و راستچین مقاله لطفا روی لینک زیر کلیک کنید :
Virtual Dom در ری اکت

همه چیز در مورد Fragment در React !

FrontEndi — Sat, 16 Sep 2023 13:04:53 +0000

زمانیکه نسخه 16.2.0 ری اکت منتشر شد ، یک ویژگی جدید به اون اضافه شد به اسم React Fragment !

داستان انتشار Fragment در ری اکت، مثل داستان Strict Mode داستان یک مشکل بود که React Developer ها با اون درگیر بودن .

در حقیقت Fragment در ری اکت یکی از اون موضوعاتی هست که کمتر کسی تو React بهش توجه میکنه اما تو این مقاله میخوایم بصورت تخصصی React.Fragment رو بررسی کنیم.

دلیل استفاده از Fragment در ری اکت چیست ؟

کامپوننت هایی که در React ایجاد میکنیم از این 2 حالت خارج نیستند :

کامپوننت ما یک  Element  برمیگرداند ( Return میکند )
کامپوننت ما دو یا چند Element  برمیگرداند ( Return میکند )

در ری اکت ، اگر قصد داشته باشیم 2 یا چند Element برگردانیم ( Return کنیم ) باید تمامی آنها را داخل یک Element مثل div قرار دهیم .

ویژگی React.Fragment چیست ؟

قابلیت React Fragment به ما اجازه میدهد که چندین Element را از درون یک کامپوننت Return کنیم ( برگردانیم ).

ویژگی Fragment تمامی Element های درون خود را بصورت یک گروه در می آورد و آنرا Return میکند.

تا قبل از معرفی این ویژگی ، React Developer ها از div برای گروه بندی Element های یک کامپوننت استفاده میکردند که معایب بسیاری بهمراه داشت .

به مثال زیر توجه کنید :

const App = () => { return ( <Fragment> // من دور اِلِمان ها پیچیده شدم <h1>من آیتم اول این کامپوننت هستم</h1> <p>من آیتم دوم این کامپوننت هستم</p> </Fragment> ); } export default App

از چه اِلِمان هایی به عنوان Wrapper در ری اکت میتوانیم استفاده کنیم؟

در ری اکت از اِلِمان های مختلفی مثل div , span , Fragment , <> و … میتوانیم به عنوان Wrapper استفاده کنیم .

اکثر توسعه دهنده های ری اکت همیشه از div به عنوان Wrapper استفاده میکنند ، اما اینکار اصلا درست نیست .
آیا میتوان از

به عنوان Wrapper استفاده کرد ؟

اگر هدف شما از قرار دادن div به عنوان Wrapper ، افزون استایل است ( مثل hover ) هیچ مشکلی نیست و میتوانید از

استفاده کنید .

اما اگر هدف شما برای استفاده از div ، صرفا بحث Wrapper بودن آن است ، قطعا انتخاب های بهتری هم وجود دارد و استفاده از div منطقی نیست .

استفاده از div به عنوان Wrapper خیلی اوغات میتواند مشکلاتی مثل بهم خوردن Style های Css را بهمراه داشته باشند مخصوصا زمانیکه از FlexBox و Grid استفاده میکنید .

به عنوان یک React Developer حرفه ای باید تمام تلاش خودتون رو بکنید که Element اضافی وارد DOM نکنید ! اما زمانیکه از div به عنوان والد استفاده میکنید ، اینکار را میکنید !
تفاوت Fragment با div در چیست ؟

Fragment باعث میشه تمامی div های اضافی از درخت DOM حذف بشه ، اما زمانیکه از div بجای Fragment استفاده میکنید نه تنها این اتفاق نمی افتد بلکه یک div اضافه هم وارد DOM میکنید !

مزایای استفاده از Fragment در ری اکت

درصورتیکه از Fragment بجای div استفاده کنید مزایای زیر را برای شما خواهد داشت :

استفاده از React.Fragment باعث میشود کد شما تمیزتر و خواناتر باشد .

کامپوننت شما سریعتر Render میشود و از حافظه کمتری استفاده میکند .

استفاده از div به دلیل اینکه ویژگی های بیشتری نسبت به Fragment دارد باعث سنگین شدن صفحه و بارگذاری دیرتر صفحه میشود ، پس زمانیکه از React.Fragment استفاده کنید سرعت بارگذاری صفحه نیز سریعتر خواهد بود .

اگر از div استفاده کنید ، به دلیل تو در تو شدن Element ها در DOM ، دیباگ کردن کد سخت تر خواهد شد ، در مقابل استفاده از Fragment باعث میشود Element کمتری در DOM قرار بگیرد و دیباگ کد راحت تر باشد .

برای مطالعه نسخه کامل و راستچین مقاله روی لینک زیر کلیک کنید :
Fragment در ری اکت

همه چیز در مورد Strict Mode ری اکت !

FrontEndi — Sat, 16 Sep 2023 12:58:17 +0000

اگه شما هم یک React Developer باشید حداقل یکبار اسم StrictMode ری اکت به گوشتون خورده . اما واقعا این ابزار چیکار میکنه ؟!

با فِرانت اِندی همراه باشید تا کامل بررسیش کنیم 🙂

Strict Mode در ری اکت چیست ؟

قابلیت StrictMode به شما کمک میکنه که در مراحل فاز توسعه پروژه ( فاز Development ) باگ ها و مشکلات رایج پروژتون رو پیدا کنید .

در واقع StrictMode حالت سخت گیرانه ری اکت هست ! این ابزار فقط در فاز Development کاربرد داره و به شما کمک میکنه که مشکلات پروژتون رو در زمان توسعه پیدا کنید و اونهارو فیکس کنید .

در واقع وقتی حالت StrictMode رو در ری اکت فعال میکنیم ، در پشت صحنه react یکسری بررسی های اضافی روی اپیکیشن ما صورت میگیره تا کوچکترین مشکلات و باگ های احتمالی ، به ما اطلاع داده بشه .

وقتی React.StrictMode فعال میشه ، React چهار مورد زیر رو دقیق بررسی میکنه :

چگونه React.StrictMode را فعال کنیم ؟

فعالسازی حالت سخت گیرانه ری اکت ( StrictMode ) بسیار راحت است !

شما دو انتخاب دارید :

استفاده از ابزار StrictMode در کل پروژه

کافی است به فایل index.js روت پروژه مراجعه کنید و مطابق خط 5 و 7 از این قابلیت فوق العاده ری اکت استفاده کنید :

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <React.StrictMode>
    <App /> // هرچیزی که اینجا قرار بگیرد ، قوانین سختگیرانه روی آن اعمال میشود
  </React.StrictMode>,
  document.getElementById('root')
);

در تیکه کد بالا ، تمام App به عنوان Children به ابزار StrictMode داده شده است . پس با انجام این کار تمام پروژه ما در حالت Development از این ابزار استفاده خواهد کرد .

استفاده از ابزار StrictMode برای یک یا چند کامپوننت

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

در چنین مواقعی بصورت زیر عمل میکنیم :

`import { StrictMode } from 'react';

function App() {
return (
<>
// حالت سختگیرانه روی هدر اعمال نمیشود

// حالت سختگیرانه روی فوتر اعمال نمیشود
</>
);
}`

اتفاقی که در تیکه کد بالا می افتد ، این است که تمام اپیکیشن به جز کامپوننت Header و Footer ، از ابزار StrictMode استفاده میکنند.

اما اگر میخواهید فقط کامپوننت Button از این ابزار استفاده کند ، بصورت زیر عمل کنید :

`import { StrictMode } from 'react';
import {Button} from 'antd'

function App() {
return (
<>

حالت سختگیرانه فقط روی من اعمال میشود ، نه چیز دیگری

</>
);
}`

برای مطالعه نسخه کامل و راستچین مقاله لطفا روی لینک زیر کلیک کنید :
Strict Mode در ری اکت