حالت (State) و مدیریت وضعیت در کامپوننت‌های React
State در React برای ذخیره و مدیریت داده‌های متغیر در یک کامپوننت استفاده می‌شود. برخلاف Props که فقط خواندنی هستند، State می‌تواند تغییر کند و باعث رندر مجدد (Re-render) کامپوننت شود.
مدیریت State در کامپوننت‌های کلاسی
در کامپوننت‌های کلاسی، State در constructor مقداردهی می‌شود و با this.setState() تغییر می‌کند.
class Counter extends Component {
constructor(props) {
super(props);
this.state = { count: 0 }; // مقدار اولیه‌ی state
}
increment = () => {
this.setState({ count: this.state.count + 1 }); // تغییر مقدار state
};
render() {
return (
<div>
<h1>عدد: {this.state.count}</h1>
<button onClick={this.increment}>افزایش</button>
</div>
);
}
}
export default Counter;
✔ this.state.count مقدار State را نگه می‌دارد.
✔ با this.setState({ count: ... }) مقدار جدید تنظیم شده و کامپوننت دوباره رندر می‌شود.
مدیریت State در کامپوننت‌های فانکشنی (با Hooks)
از Hook به نام useState برای مدیریت State در کامپوننت‌های فانکشنی استفاده می‌شود.
const Counter = () => {
const [count, setCount] = useState(0); // مقدار اولیه‌ی state
return (
<div>
<h1>عدد: {count}</h1>
<button onClick={() => setCount(count + 1)}>افزایش</button>
</div>
);
};
export default Counter;
✔ useState(0) مقدار اولیه را تعیین می‌کند.
✔ setCount(count + 1) مقدار جدید را تنظیم کرده و باعث رندر مجدد می‌شود.
مقایسه‌ی مدیریت State در کلاس و فانکشن
| ویژگی | کامپوننت کلاسی | کامپوننت فانکشنی |
|---|---|---|
| مقداردهی State | this.state = {...} در constructor |
useState(initialValue) |
| تغییر State | this.setState({...}) |
setStateFunction(newValue) |
| خوانایی | پیچیده‌تر | ساده‌تر و خواناتر |
| پشتیبانی از Lifecycle | دارد | با useEffect انجام می‌شود |
استفاده از this |
بله | خیر |
مدیریت چند مقدار در State
گاهی لازم است چند مقدار مختلف را در State ذخیره کنیم.
✅ کامپوننت کلاسی:
state = { name: "علی", age: 25 };
updateAge = () => {
this.setState({ age: this.state.age + 1 });
};
render() {
return (
<div>
<h1>نام: {this.state.name}</h1>
<p>سن: {this.state.age}</p>
<button onClick={this.updateAge}>افزایش سن</button>
</div>
);
}
}
✅ کامپوننت فانکشنی (با useState):
const [user, setUser] = useState({ name: "علی", age: 25 });
const updateAge = () => {
setUser({ ...user, age: user.age + 1 }); // حفظ مقدار قبلی و فقط تغییر age
};
return (
<div>
<h1>نام: {user.name}</h1>
<p>سن: {user.age}</p>
<button onClick={updateAge}>افزایش سن</button>
</div>
);
};
✔ در فانکشنی از ...user استفاده کردیم تا سایر مقادیر حفظ شوند.
حالت‌های پیشرفته‌ی مدیریت State
✅ مدیریت مقادیر پیچیده‌تر: به‌جای useState می‌توان از useReducer استفاده کرد.
✅ مدیریت State سراسری: اگر نیاز به مدیریت State بین چند کامپوننت باشد، می‌توان از useContext یا ابزارهایی مثل Redux استفاده کرد.
✅ جمع‌بندی:
- State برای ذخیره داده‌های متغیر در کامپوننت‌ها استفاده می‌شود.
- در کلاس‌ها از
this.stateوthis.setState()استفاده می‌شود. - در فانکشن‌ها از
useState()برای مقداردهی و تغییر State استفاده می‌شود. - برای داده‌های پیچیده‌تر از
useReducerیا مدیریت State سراسری (Redux, Context API) استفاده می‌شود.
