لوگو کتاب اول بازگشت به فهرست کتاب‌ها

حالت (State) و مدیریت وضعیت در کامپوننت‌ها در React

حالت (State) و مدیریت وضعیت در کامپوننت‌های React

State در React برای ذخیره و مدیریت داده‌های متغیر در یک کامپوننت استفاده می‌شود. برخلاف Props که فقط خواندنی هستند، State می‌تواند تغییر کند و باعث رندر مجدد (Re-render) کامپوننت شود.

مدیریت State در کامپوننت‌های کلاسی

در کامپوننت‌های کلاسی، State در constructor مقداردهی می‌شود و با this.setState() تغییر می‌کند.

import React, { Component } from "react";
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 در کامپوننت‌های فانکشنی استفاده می‌شود.

import React, { useState } from "react";
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 ذخیره کنیم.

✅ کامپوننت کلاسی:

class Profile extends Component {
  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 Profile = () => {
  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) استفاده می‌شود.

کلید واژه ها : حالت-مدیریت وضعیت-کامپوننت‌ها--React-state management-components

صفحه قبلی پروپرتی‌ها (Props) در React صفحه بعدی مدیریت ایونت‌ها (Events) در React