4. آشنایی با UseEffect در React

در روز سوم با نوعی از متغییرها که در طول زمان قابلیت تغییر دارند صحبت کردیم(State) . در واقع ما داشتیم از UseState برای تعریف کردن State و تابع به روزرسان اون استفاده می کردیم. در جاوا اسکریپت به UseState یک Hook گفته می شود.( من دیگه کاری ندارم در ورژن های قبلی فلان جور بود و الان هوک ها اومدن به جای فلان چیز و... ، چون ما با هم بستیم که کامپوننت هامون رو به صورت فانکشن می نویسیم و کاری به ورژن های قبلی نداریم که اوضاع چطور بوده)

هوک ها یک سری توابع از پیش تعریف شده هستند که هرکدوم برای انجام کاری ساخته شدند. یکی دیگه از هوک هایی که امروز باهاش آشنا می شیم UseEffect می باشد.

این هوک میاد یک سری عملیات خاص رو در موقعیت های خاص اجرا میکنه.

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

useEffect( (  ) =>  {alert('WellCome to this page') }  , [ ] )

این نحوه ی استفاده از هوک UseEffect هست. اگر توجه کنید این هوک از سه بخش تشکیل شده.

useEffect(  (  )  =>  {   }  , [  ]  )

قسمت اول ( ) : هنوز به مورد استفاده اش برخورد نکردم ، اگر یافتم اپدیت می کنم پست رو.

قسمت دوم { } : این جا همون عملیات خاصی که انتظار داریم هوک انجام بده رو توش می نویسیم.

قسمت سوم [ ] : این جا برای هوک تعریف میکنید که اون موقعیت خاصی که می خواهید عملیات خاص (قسمت دوم هوک) اجرا بشه ، چی هست؟ پ.ن: اگر این قسمت رو خالی بذارید هوک فقط در مرتبه ی اول اجرا خواهد شد.

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

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

export function Counter( ) {
const [ counter , setCounter ] = useState( 0 );
useEffect( ( ) => { document.title = counter; } , [counter] )
setTimeout(() => {setCounter(counter+1)}, 1000);
}

در خط دوم یک State تعریف کردیم. حالا بیاید سه بخش مربوط به هوک UseEffect رو بررسی کنیم.

بخش اول پرانتزی : که خالیه و نمی دونم هم برای چی هست!

بخش دوم آکولادی : همون عملیات خاص رو ذکر کردیم که در واقع نمایش مقدار State در Title صفحه هست.

بخش سوم براکتی: تعریف کردن موقعیت خاصی که میخواهیم هوک برامون اجرا بشه ، وقتی که فقط یه متغیر رو گذاشتیم اونجا، یعنی هر موقع که مقدار این متغیر تغییر کرد ، هوک رو برامون اجرا کن .

در آخر هم یک تایمر گذاشتیم که هر یک ثانیه یک بار مقدار State رو افزایش بده ( و تغییر این State موجب اجرا شدن هوک و آپدیت شدن مقدار Title میشه).

مثال سوم: همون تایمری که در مثال دوم نوشتیم رو به صورت کاربردی در صفحه وب نمایش بدیم:

export function Counter(){ 
const [ counter , setCounter ] = useState ( 0 );
useEffect( ( ) => { 
setTimeout(() => {setCounter(counter+1)}, 1000); } , [counter] )
return ( 
<div>
         <p>The timer is {counter}</p>
</div> ); }

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

مطالعه آزاد:

باید درباره LifeCycle و Render کردن هم مطالعاتی بکنیم توی روزهای بعدی.

درباره LifeCycle این پست کمک میکنه. رندر کردن هم ظاهرا یکی از متدهای چرخه حیات هست که توی همون پست بهشون اشاره شده.

احتمالا درباره DOM هم شنیدید. وقتشه کمی با اونم آشنا بشید: از اینجا بخونید.