3. آشنایی با State در React

تا اونجا رسیده بودیم که با Props اطلاعاتی (متغییرها یا توابع Handler) رو به کامپوننت ها ارسال کردیم. و اشاره کردیم که مقدار Props داخل کامپوننت ها قابل تغییر نمی باشد. برای متغییرهایی که قرار هست داخل کامپوننت تغییر کنند باید از State ها استفاده کنیم.

در ابتدا لازم است یک فایل Counter در مسیر پوشه کامپوننت ها ایجاد کنیم.

در فایل ایجاد شده یک کامپوننت به اسم Counter ایجاد می کنیم و دارای یک متن و یک کلید است که با فشردن آن یک Alert به نمایش در خواهد آمد.

import React from &quotreact&quot
export function Counter( ) { return ( <div>
                          <p> you have clicked N times </p>
                          <button = { () => alert(&quot click &quot) } >  Press </button> 
</div> ); } /19

یادتون نره در فایل APP (برنامه شماره 18) باید این کامپوننت رو import کنید. نیازی هم به کامپوننت wellcome ندارید. میتونید اون ها رو توی فایل app کامنت یا حذف کنید( این برنامه ها در روزهای قبل آموزش داده شده اند).

خب حالا میخوایم بخش های جدید رو به برنامه 19 اضافه کنیم.

1. در قسمت import باید{useState} رو اضافه کنید.
2. بعد یک state به نام کانتر تعریف میکنیم.

import React , {useState} from &quotreact&quot 
export function Counter(){
const[counter,setCounter]=useState(0);  
return ( <div> 
              <p>you have clicked {counter}  times </p>
              <button  = { ( ) => setCounter (counter+1) }> 
               Press </button>  
              </div> ) ; } /20

در هنگام تعریف کردن یک state به این صورت عمل می شود. اول یک state تعریف میشود (در اینجا counter) بعد یک state updater (در اینجا setCounter) و مقدار اولیه state (در اینجا 0).

بعد از تعریف کردن state به شکل بالا ، هرجا نیاز بود مقدار state فراخوانی شود از نام آن داخل { } و هرجا نیاز بود مقدار آن به روز رسانی شود از setCounter استفاده می شود و مقدار جدید state به آن تابع ارسال می شود.

به همین سادگی به همین خوشمزگی!

شیوه اصولی تر به جای اینکه بیایم داخل همون تگ از setCounter استفاده کنیم باید یک تابع Handler نوشته بشه و اپدیت کردن و سایر کارها رو داخل اون Handler انجام بدیم.

import React,{useState} from &quotreact&quot 
export function Counter(){ 
const[counter,setCounter]=useState(0); 
const changeHandler = ( ) => { setCounter(counter+1) ; }
return ( <div>
<p>you have clicked {counter} times </p>
<button ={ ( ) => changeHandler( ) }> Press </button>
</div> ); } 21

خلاص.