الگوریتم اول

لطفا صبر کنید...

حالت (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) استفاده می‌شود.