State یک شیء جاوا اسکریپت است که داده‌های دینامیک کامپوننت را نگه‌داری می‌کند و آن را قادر می‌سازد که تغییرات بین رندرها را ردگیری کند. البته توجه داشته باشید از آنجا که state ها داینامیک هستند نمیتوان آنرا در پروژه های استاتیک صفحه به کاربرد.
خب ما در ادامه دوتا مثال مختلف از state ها میزنیم.
روش اول یک state را درون یک کامپوننت کلاس تعریف میکنیم.
کامپوننت‌ها به صورت کلاس‌هایی تعریف می‌شوند که ویژگی‌های اضافی دارند. State محلی دقیقاً به معنای یک ویژگی است که تنها در کلاس‌ها وجود دارد. State صرفاً درون کلاس می‌تواند مورد استفاده قرار گیرد و معمولاً تنها جایی است که می‌توان this.state را به عنوان سازنده مطرح کرد.
class Timer extends React.Component {
constructor() {
super();
this.state = {
time: new Date().toLocaleTimeString()
// front code
}
}
render() {
setInterval(()=>{
this.setState({
time:new Date().toLocaleTimeString()
// وبسایت فرانت کد
})
},1000)
return (
<h3 className="timer"><span class="ez-toc-section" id="time_is_thisstatetime"></span>time is: {this.state.time}<span class="ez-toc-section-end"></span></h3>
)
}
}
در کد بالا ما اومدیم یک کامپوننت کلاسی تعریف کردیم
تعریف کلاس و سازنده (Constructor):
- کلاس به نام
Timerتعریف شده که ازReact.Componentارث‌بری می‌کند. - در سازنده (constructor)،
super()فراخوانی می‌شود تا سازنده کلاس والد (React.Component) نیز فراخوانی شود. this.stateتنظیم می‌شود تا شامل یک ویژگیtimeباشد که زمان فعلی را به صورت رشته‌ای ذخیره می‌کند.
- کلاس به نام
متد
render:- متد
renderمسئول رندر کردن JSX است که در اینجا یک عنصر<h3>با کلاسtimerو متن “time is: {this.state.time}” است. setIntervalدرونrenderقرار دارد که هر ثانیه (1000 میلی‌ثانیه) یکبار فراخوانی می‌شود.- در هر فراخوانی
setInterval، متدthis.setStateفراخوانی می‌شود تا ویژگیtimeدرstateبه زمان فعلی به‌روزرسانی شود.
- متد
خروجی را در عکس زیر ببینید:
- این کامپوننت هر ثانیه به‌روزرسانی می‌شود و زمان فعلی را درون عنصر
<h3>نمایش می‌دهد.
- این کامپوننت هر ثانیه به‌روزرسانی می‌شود و زمان فعلی را درون عنصر
نکته: قرار دادن setInterval درون render ممکن است باعث مشکلات عملکردی شود، زیرا هر بار که کامپوننت رندر می‌شود، یک تایمر جدید ایجاد می‌شود. بهتر است setInterval را در متد componentDidMount قرار دهید تا فقط یکبار پس از اولین رندر اجرا شود.
روش دوم استفاده از هوک ها هستش به این روش ما میتونیم state هارو استفاده کنیم
import React from 'react';
import ReactDOM from 'react-dom/client';
import {useState} from "react";
import './style.css'
const Counter = () =>{
const [count,setCount] = useState(0)
function next()
{
setCount(count + 1)
}
function previus()
{
setCount(count - 1)
}
return(
<div className="counter">
<button onClick={next} className="counter_btn">+</button>
<span>{count}</span>
<button onClick={previus} disabled={count<=0} className="counter_btn">-</button>
</div>
)
}
این کد یک کامپوننت تابعی React به نام Counter را تعریف می‌کند که یک شمارنده ساده را پیاده‌سازی می‌کند. بیایید قدم به قدم آن را بررسی کنیم:
تعریف کامپوننت و استفاده از
useState:const Counter = () => { const [count, setCount] = useState(0);- اینجا یک کامپوننت تابعی به نام
Counterتعریف شده است. - از هوک
useStateبرای مدیریت حالت (state) استفاده شده است.countمقدار شمارنده را نگه می‌دارد وsetCountتابعی است که برای به‌روزرسانیcountاستفاده می‌شود. مقدار اولیهcountبرابر با 0 است.
- اینجا یک کامپوننت تابعی به نام
تعریف توابع
nextوprevius:function next() { setCount(count + 1); } function previus() { setCount(count - 1); }- تابع
nextمقدارcountرا یک واحد افزایش می‌دهد. - تابع
previusمقدارcountرا یک واحد کاهش می‌دهد.
- تابع
بازگشت JSX:
return ( <div> <button onClick={next}>+</button> <span>{count}</span> <button onClick={previus}>-</button> </div> );- این بخش JSX را بازمی‌گرداند که شامل یک دکمه برای افزایش شمارنده، یک عنصر
<span>برای نمایش مقدارcountو یک دکمه برای کاهش شمارنده است. - دکمه‌ها با استفاده از ویژگی
onClickبه توابعnextوpreviusمتصل شده‌اند.
- این بخش JSX را بازمی‌گرداند که شامل یک دکمه برای افزایش شمارنده، یک عنصر
این کامپوننت به شما اجازه می‌دهد تا با کلیک بر روی دکمه‌ها، مقدار شمارنده را افزایش یا کاهش دهید و مقدار فعلی شمارنده را در صفحه نمایش دهید.
خروجی کد:
