کاربرد State ها در ری اکت چیست

State ها در ی اکت چیست و چه کاربردی دارند

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

برای توضیحات بیشتر میتونید این لینک رو مطالعه بفرمایید

اما یک مثال هم برای شما در ادامه همین پاسخ میگم. می خواهیم یک شمارنده رو در ری اکت با استفاده از State ایجاد کنیم.

مرحله اول :

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

import React,{useState} from 'react';

const Counter =()=>{
    const[count,setCount]=useState(0);
    return(
        <div>
               <p>click Count : {count}</p>
               <button onClick={()=>setCount(count+1)}>Click Please</button>
        </div>
    )
}

export default Counter;

در کدهای بالا 

1. در خط اول برای استفاده از State از useState عملیات import رو انجام دادیم.
2. در خط 4 یک متغیر به نام count ایجاد کردیم و با استفاده از دستور setState مقدار رو بهش اختصاص دادیم. (مقدار پیش فرض رو 0 گذاشتیم).
3. در ادامه هم یک تگ div داریم که با استفاده از دستور {count} مقدار رو نمایش میده.
4. و همچنین یک button داریم که در رویداد onClick اون یک تابع نوشته شده و با استفاده از دستور setCount که 4 برای متغیر count تعریف شده مقدار رو به روز رسانی می کنیم.

خب حالا باید از این کامپوننت در فایل App.js استفاده کنیم. به این منظور کد زیر رو در فایل app.js می نویسیم

import React from 'react';
import Counter from './components/counter';
  /*some code*/
  return (
      <div>
        <Counter/>
      </div>
  );
  

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

npm start

در خروجی تصویر زیر رو خواهیم داشت که با هر بار کلیک روی دکمه مقدار count یک واحد با استفاده از State ها در ری اکت افزایش پیدا می کنه.