مدیریت استیت (State Management) در ری‌اکت: راهنمای جامع

پیمان باقری

برنامه نویس و متخصص وب

مدیریت وضعیت یکی از اساسی‌ترین مفاهیم در توسعه اپلیکیشن‌های ری‌اکت محسوب می‌شود و نقشی حیاتی در ایجاد تجربه‌های تعاملی و دینامیک ایفا می‌کند. State به داده‌هایی اشاره دارد که می‌توانند در طول اجرای اپلیکیشن تغییر کنند و این تغییرات مستقیماً بر رفتار و ظاهر کامپوننت‌ها تأثیر می‌گذارند. این داده‌ها توسط کامپوننت‌ها نگهداری می‌شوند و تغییر آنها باعث رندر مجدد کامپوننت و به‌روزرسانی UI می‌شود.

در این مقاله، مدیریت وضعیت را از دو منظر بررسی می‌کنیم: کامپوننت‌های کلاسی که از متدهای تعریف‌شده در کلاس‌ها برای کنترل وضعیت استفاده می‌کنند و کامپوننت‌های تابعی که با استفاده از هوک قدرتمند useState این کار را انجام می‌دهند. علاوه بر این، به بررسی تفاوت‌های کلیدی بین این دو روش، مزایا و معایب هرکدام، و نکات پیشرفته برای بهینه‌سازی مدیریت وضعیت خواهیم پرداخت. این مقاله به شما کمک می‌کند تا بتوانید انتخاب درستی برای پروژه‌های خود داشته باشید.

وضعیت (State) در ری‌اکت چیست؟

State در ری اکت به داده‌هایی گفته می‌شود که توسط یک کامپوننت نگهداری شده و می‌توانند در طول زمان تغییر کنند. این تغییرات باعث می‌شود که ری‌اکت رابط کاربری (UI) را به‌روزرسانی کند.

مثال ساده: وضعیت دکمه “پسندیدن” (Like) در یک اپلیکیشن اجتماعی.
کاربرد: مدیریت تعاملات کاربر، کنترل فرم‌ها، ذخیره اطلاعات موقت و تغییر پویا در UI.

تعریف ساده State

State مانند حافظه محلی یک کامپوننت عمل می‌کند که فقط در همان کامپوننت قابل دسترس است. برخلاف props که داده‌ها را از کامپوننت والد دریافت می‌کند و تغییرناپذیر هستند، state داخلی است و می‌تواند به‌روزرسانی شود.

ویژگی‌های اصلی State

دینامیک بودن

State قابل تغییر است و این تغییرات می‌توانند به نمایش متفاوت رابط کاربری منجر شوند. برای مثال، در یک کامپوننت شمارنده، مقدار شمارش درون state ذخیره شده و با هر کلیک کاربر تغییر می‌کند.
محدوده محلی

State فقط به کامپوننتی که در آن تعریف شده مربوط است و به طور مستقیم نمی‌توان آن را به سایر کامپوننت‌ها انتقال داد.
بازرندر خودکار

هر زمان state تغییر کند، ری‌اکت به‌طور خودکار کامپوننت مربوطه را رندر مجدد می‌کند تا تغییرات در UI بازتاب یابد.

چرا State مهم است؟

تعامل کاربر

بسیاری از تعاملات کاربران، مانند کلیک روی دکمه، وارد کردن داده‌ها در فرم‌ها یا تغییر صفحات، نیازمند به‌روزرسانی state هستند.
مدیریت رفتار کامپوننت‌ها

از state می‌توان برای مدیریت وضعیت‌های مختلف یک کامپوننت مانند نمایش یا پنهان کردن عناصر، کنترل درخواست‌های API یا ذخیره داده‌های موقت استفاده کرد.

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

State در کامپوننت‌های کلاسی یکی از پایه‌های اساسی ری‌اکت برای ساخت اپلیکیشن‌های پویا است. با استفاده از State در کلاس‌ها، می‌توان داده‌های متغیر را ذخیره کرد و با تغییر آن‌ها، رابط کاربری را به‌طور خودکار به‌روزرسانی کرد.

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

در کامپوننت‌های کلاسی، state یک شیء جاوااسکریپتی است که در داخل کامپوننت تعریف می‌شود و اطلاعات محلی همان کامپوننت را ذخیره می‌کند. این اطلاعات به‌طور مستقیم توسط کامپوننت قابل دسترسی هستند و می‌توانند به روش‌های مختلف تغییر یابند.

State در کلاس‌ها از طریق سازنده (constructor) تعریف می‌شود. برای مقداردهی اولیه آن، باید سازنده از کلاس React.Component ارث‌بری کند و تابع super() را فراخوانی کند.

مثال: تعریف state در کلس کامپوننت ها

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0, // مقدار اولیه state
    };
  }
}

تغییر State با متد setState

در کامپوننت‌های کلاسی، برای به‌روزرسانی state از متد setState استفاده می‌شود. این متد به ری‌اکت می‌گوید که state تغییر کرده و باید کامپوننت را دوباره رندر کند.

نکات کلیدی درباره setState

1. غیرمستقیم بودن تغییرات

نباید state را به صورت مستقیم تغییر داد. مثلاً:

this.state.count = this.state.count + 1; // اشتباه

به جای آن باید از setState استفاده کرد:

this.setState({ count: this.state.count + 1 }); // صحیح

2. به‌روزرسانی غیرهم‌زمان

به‌روزرسانی‌های state ممکن است بلافاصله اعمال نشوند، زیرا ری‌اکت ممکن است چندین فراخوانی setState را ترکیب کند تا عملکرد را بهینه کند. اگر state جدید به مقدار قبلی وابسته است، از نسخه تابعی setState استفاده کنید:

this.setState((prevState) => ({ count: prevState.count + 1 }));

3. استفاده از State در متد render

برای نمایش مقدار state در رابط کاربری، باید آن را در متد render استفاده کرد. این متد به‌طور خودکار هر بار که state تغییر می‌کند، دوباره اجرا می‌شود و UI به‌روزرسانی می‌شود.

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>{this.state.count}</h1> {/* نمایش مقدار state */}
        <button onClick={this.increment}>افزایش</button> {/* تغییر state */}
      </div>
    );
  }
}

چرخه حیات و State

کامپوننت‌های کلاسی به دلیل دارا بودن متدهای چرخه حیات (Lifecycle Methods) امکان کنترل بهتری بر مدیریت state دارند. برخی از این متدها عبارت‌اند از:

componentDidMount: برای تنظیم یا تغییر state پس از اولین رندر.
componentDidUpdate: برای پاسخ به تغییرات state یا props.
componentWillUnmount: برای پاکسازی state یا منابع قبل از حذف کامپوننت.

مثال: به‌روزرسانی state در componentDidMount

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { time: 0 };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState((prevState) => ({ time: prevState.time + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <h1>Elapsed Time: {this.state.time}s</h1>;
  }
}

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

پیچیدگی کد

کامپوننت‌های کلاسی معمولاً به کد بیشتری نیاز دارند که می‌تواند خوانایی را کاهش دهد.
وابستگی به this

مدیریت state در کلاس‌ها نیازمند درک صحیح مفهوم this است، که ممکن است برای توسعه‌دهندگان تازه‌کار چالش‌برانگیز باشد.

مدیریت state در کامپوننت‌های کلاسی هنوز در بسیاری از پروژه‌ها رایج است، اما با معرفی هوک‌های ری‌اکت مانند useState، توسعه‌دهندگان بیشتر به سمت کامپوننت‌های تابعی روی آورده‌اند. با این حال، کامپوننت‌های کلاسی همچنان ابزار قدرتمندی برای ساختارهای پیچیده و کنترل دقیق وضعیت کامپوننت‌ها هستند.

مدیریت State در کامپوننت‌های تابعی با هوک useState

هوک useState یکی از مهم‌ترین ابزارهای مدیریت وضعیت در کامپوننت‌های تابعی است. این هوک که در نسخه 16.8 React معرفی شد، امکان افزودن state را به کامپوننت‌های تابعی (Functional Components) می‌دهد. برخلاف کامپوننت‌های کلاسی که نیاز به استفاده از this.state و متد setState دارند، در کامپوننت‌های تابعی مدیریت state به‌طور مستقیم و ساده‌تر انجام می‌شود.

تعریف هوک useState

useState تابعی است که توسط ری‌اکت ارائه می‌شود و یک آرایه شامل دو مقدار را برمی‌گرداند:

1. مقدار فعلی state.
2. تابعی برای به‌روزرسانی state.

سینتکس:

const [state, setState] = useState(initialValue);

- state: مقدار فعلی state.
- setState: تابعی برای تغییر مقدار state.
- initialValue: مقدار اولیه state که می‌تواند هر نوع داده‌ای باشد (اعداد، رشته‌ها، آرایه‌ها، اشیاء، و …).

نحوه استفاده از useState

برای درک بهتر، یک مثال ساده از شمارنده (Counter) ارائه می‌شود:

مثال: شمارنده ساده

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // مقدار اولیه state برابر با 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

export default Counter;

- در این مثال، state با مقدار اولیه 0 تعریف شده است.
- با کلیک روی دکمه، مقدار count به‌روزرسانی می‌شود و ری‌اکت کامپوننت را دوباره رندر می‌کند.

استفاده از useState با داده‌های پیچیده‌تر

useState می‌تواند برای مدیریت داده‌های پیچیده‌تر مانند آرایه‌ها و اشیاء نیز استفاده شود.

مثال: مدیریت یک شیء

function UserProfile() {
  const [user, setUser] = useState({ name: 'Ali', age: 25 });

  const updateAge = () => {
    setUser({ ...user, age: user.age + 1 }); // حفظ سایر خصوصیات شیء با استفاده از spread
  };

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <button onClick={updateAge}>Increase Age</button>
    </div>
  );
}

- در این مثال، مقدار state به‌صورت یک شیء تعریف شده است.
- برای تغییر state، ابتدا باید مقادیر قبلی با استفاده از عملگر spread (…) کپی شوند تا دیگر خصوصیات از بین نروند.

نکته:
در هنگام کار با stateهای پیچیده، مدیریت دقیق مقادیر فعلی ضروری است.

به‌روزرسانی state بر اساس مقدار قبلی

هنگامی که مقدار جدید state به حالت قبلی آن وابسته است، باید از نسخه تابعی setState استفاده کرد.

مثال: به‌روزرسانی ایمن

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount((prevCount) => prevCount + 1); // استفاده از مقدار قبلی
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increase</button>
    </div>
  );
}

نکات پیشرفته درباره useState

مدیریت چندین state در یک کامپوننت
می‌توان از چندین هوک useState برای مدیریت بخش‌های مختلف state استفاده کرد.

const [name, setName] = useState('');
const [age, setAge] = useState(0);

مقدار اولیه مبتنی بر محاسبات
اگر مقدار اولیه نیاز به محاسبه سنگین دارد، می‌توان از تابعی برای مقداردهی اولیه استفاده کرد.

const [value, setValue] = useState(() => computeInitialValue());

ری‌اکت و بهینه‌سازی state
هنگام استفاده از useState، ری‌اکت تغییرات کوچک را مدیریت کرده و بهینه‌ترین روش را برای به‌روزرسانی DOM انتخاب می‌کند.

هوک useState توسعه‌دهندگان را قادر می‌سازد تا بدون استفاده از کامپوننت‌های کلاسی، اپلیکیشن‌های تعاملی و مدرن را با کدی مختصرتر و خواناتر ایجاد کنند. با استفاده از قابلیت‌های پیشرفته‌ای مانند به‌روزرسانی تابعی، مقادیر اولیه پویا، و مدیریت آرایه‌ها و اشیاء، useState انعطاف‌پذیری بالایی برای مدیریت وضعیت ارائه می‌دهد.

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

ویژگی	کامپوننت‌های کلاسی	کامپوننت‌های تابعی
تعریف State	State به‌طور معمول در داخل constructor تعریف می‌شود و با استفاده از this.state مدیریت می‌شود.	State به‌طور مستقیم با استفاده از هوک useState تعریف و مدیریت می‌شود.
راهکار به‌روزرسانی State	State با استفاده از متد this.setState به‌روزرسانی می‌شود.	State با استفاده از تابع setter که توسط useState برمی‌گردد به‌روزرسانی می‌شود.
متدهای Lifecycle	کامپوننت‌های کلاسی به‌طور پیش‌فرض از متدهای lifecycle مانند componentDidMount و componentDidUpdate استفاده می‌کنند.	کامپوننت‌های تابعی به‌طور پیش‌فرض فاقد متدهای lifecycle هستند، اما می‌توانند از هوک useEffect برای انجام مشابه آن‌ها استفاده کنند.
سادگی	کامپوننت‌های کلاسی معمولاً پیچیده‌تر هستند و نیاز به تعریف متدهای lifecycle و کار با this دارند.	کامپوننت‌های تابعی ساده‌تر و خواناتر هستند و تنها به هوک useState نیاز دارند.
سازگاری با Hooks	کامپوننت‌های کلاسی به‌طور طبیعی از Hooks پشتیبانی نمی‌کنند و باید از روش‌های سنتی مانند this.setState استفاده کنند.	کامپوننت‌های تابعی به‌طور مستقیم از Hooks مانند useState و useEffect پشتیبانی می‌کنند.
مناسب برای پروژه‌های بزرگ	کامپوننت‌های کلاسی ممکن است برای پروژه‌های بزرگ با نیاز به متدهای lifecycle مناسب‌تر باشند.	کامپوننت‌های تابعی به‌خصوص با استفاده از هوک‌ها در پروژه‌های مدرن و کوچک بهتر عمل می‌کنند.

نکات پیشرفته مدیریت State در ری اکت

مدیریت وضعیت (State) در ری‌اکت به عنوان یکی از مهم‌ترین مفاهیم برای ساخت اپلیکیشن‌های داینامیک شناخته می‌شود. با پیشرفت ری‌اکت و معرفی ویژگی‌های جدید مانند هوک‌ها، مدیریت وضعیت بسیار ساده‌تر و انعطاف‌پذیرتر از گذشته شده است. در این بخش به نکات پیشرفته‌تر و تکنیک‌های مفید در زمینه مدیریت وضعیت در ری‌اکت خواهیم پرداخت:

1. State محلی در کامپوننت‌ها

هر کامپوننت در ری‌اکت می‌تواند وضعیت محلی (Local State) خود را داشته باشد. این وضعیت برای ذخیره اطلاعات خاص آن کامپوننت استفاده می‌شود. اما وقتی پروژه‌ها پیچیده می‌شوند و نیاز به انتقال داده بین کامپوننت‌ها داریم، نیاز به راه‌حل‌هایی مانند Context API یا Redux برای مدیریت وضعیت در سطح بالاتر (Global State) پیش می‌آید.

- پیشنهاد: همیشه سعی کنید از مدیریت وضعیت محلی برای کامپوننت‌های مستقل استفاده کنید و از Global State فقط برای وضعیت‌های مشترک بین چندین کامپوننت استفاده کنید.

2. بهینه‌سازی عملکرد با استفاده از React.memo

در کامپوننت‌های تابعی که از هوک‌ها استفاده می‌کنند، می‌توان از React.memo برای جلوگیری از رندر مجدد غیرضروری استفاده کرد. این کار باعث بهبود عملکرد و کاهش بار پردازشی می‌شود، مخصوصاً زمانی که وضعیت کامپوننت تغییر نکند.

React.memo باعث می‌شود که تنها در صورتی که props تغییر کند، کامپوننت رندر شود. این تکنیک برای اجزای UI که به ندرت تغییر می‌کنند، بسیار مفید است.

3. استفاده از useReducer به جای useState برای مدیریت وضعیت پیچیده

در هنگام مدیریت وضعیت‌های پیچیده‌تر و چندبخشی (مانند وضعیت‌هایی که شامل چندین فیلد هستند)، استفاده از هوک useReducer می‌تواند کارایی بالاتری داشته باشد. این هوک مانند Redux عمل می‌کند و می‌تواند به‌طور مؤثری وضعیت‌های پیچیده را با استفاده از یک reducer مدیریت کند.

به عنوان مثال، اگر نیاز به مدیریت چندین فیلد فرم دارید، useReducer می‌تواند کمک کند تا وضعیت را به صورت یکجا و با استفاده از عملیات‌های مشخص مدیریت کنید.

4. مراقبت از همزمانی و به‌روزرسانی‌های متعدد State

در هنگام استفاده از setState در کامپوننت‌های کلاسی یا useState در کامپوننت‌های تابعی، باید مراقب همزمانی و به‌روزرسانی‌های متعدد باشید. اگر چندین بار از setState یا useState برای به‌روزرسانی وضعیت استفاده کنید، ممکن است باعث بروز مشکلات ناخواسته در رندر کامپوننت‌ها شود.

برای رفع این مشکل، می‌توانید از تابع setter (که در useState وجود دارد) برای دسترسی به وضعیت فعلی استفاده کنید تا اطمینان حاصل شود که به‌روزرسانی‌ها به درستی انجام می‌شود.

5. مکانیزم‌های مدیریت وضعیت سراسری (Global State)

وقتی که نیاز به اشتراک‌گذاری وضعیت بین کامپوننت‌های مختلف دارید، استفاده از Context API یا Redux می‌تواند بسیار مفید باشد. با استفاده از این ابزارها می‌توانید وضعیت‌های سراسری را مدیریت کنید و از ارسال props به صورت مستقیم بین کامپوننت‌های والد و فرزند جلوگیری کنید.

Redux یک راه‌حل پیشرفته برای مدیریت وضعیت است که اجازه می‌دهد وضعیت‌ها در یک store مرکزی ذخیره شوند و از هر کامپوننتی که نیاز به دسترسی به وضعیت دارد، قابل دسترسی باشند. این روش برای پروژه‌های بزرگ با ساختار پیچیده مناسب است.

6. بهینه‌سازی با استفاده از useCallback و useMemo

استفاده از هوک‌های useCallback و useMemo در کنار useState می‌تواند به‌طور چشمگیری عملکرد اپلیکیشن را بهبود بخشد. این هوک‌ها از رندرهای غیرضروری جلوگیری می‌کنند و به کامپوننت‌ها اجازه می‌دهند تا تنها در صورت تغییر dependencies (وابستگی‌ها) رندر شوند.

برای مثال، اگر تابعی را به عنوان prop به کامپوننت فرزند ارسال می‌کنید و این تابع در هر رندر دوباره ساخته می‌شود، می‌توانید از useCallback برای جلوگیری از این کار استفاده کنید.

7. استفاده از useEffect برای هماهنگ‌سازی وضعیت با منابع خارجی

useEffect یکی از مهم‌ترین هوک‌ها در ری‌اکت است که به شما این امکان را می‌دهد که وضعیت را با منابع خارجی مانند API‌ها یا LocalStorage هماهنگ کنید. با استفاده از useEffect می‌توانید تغییرات وضعیت را به طور همزمان با تغییرات منابع خارجی بررسی کنید.

به عنوان مثال، اگر بخواهید پس از تغییر وضعیت، داده‌هایی از یک API بارگذاری کنید، useEffect به شما این امکان را می‌دهد که بدون نیاز به کد اضافی، این کار را به طور خودکار انجام دهید.

8. مدیریت وضعیت با توجه به نوع اپلیکیشن

نوع اپلیکیشن و پیچیدگی آن نقش مهمی در انتخاب ابزار مناسب برای مدیریت وضعیت ایفا می‌کند. برای اپلیکیشن‌های کوچک و متوسط که وضعیت پیچیده‌ای ندارند، useState و useReducer ممکن است بهترین گزینه باشند.

اما برای اپلیکیشن‌های بزرگ و پیچیده با نیاز به اشتراک‌گذاری وضعیت در سطوح مختلف، استفاده از ابزارهایی مانند Redux و Context API می‌تواند به مراتب مؤثرتر و قابل مدیریت‌تر باشد.

مدیریت وضعیت در ری‌اکت به عنوان یکی از ارکان اصلی توسعه اپلیکیشن‌های داینامیک و تعاملی در نظر گرفته می‌شود. با استفاده از ابزارهایی مانند useState و useReducer، مدیریت وضعیت به شکلی ساده و مقیاس‌پذیر انجام می‌شود. همچنین، با آگاهی از نکات پیشرفته‌تر مانند استفاده از React.memo، useCallback و useEffect می‌توانید عملکرد اپلیکیشن خود را بهبود دهید و تجربه کاربری بهتری ایجاد کنید.

جمع بندی:

مدیریت وضعیت (State) در ری‌اکت به‌عنوان یکی از مفاهیم کلیدی، به شما این امکان را می‌دهد که داده‌هایی که می‌توانند تغییر کنند را به‌طور مؤثر مدیریت کرده و رابط کاربری داینامیک بسازید. در این مقاله، دو روش اصلی برای مدیریت وضعیت بررسی شد: کامپوننت‌های کلاسی و هوک useState. کامپوننت‌های کلاسی با متدهای lifecycle مدیریت وضعیت را انجام می‌دهند، در حالی که useState در کامپوننت‌های تابعی رویکردی ساده‌تر و منعطف‌تر را برای مدیریت وضعیت فراهم می‌کند.

اگرچه useState رویکرد مدرن‌تری است و در پروژه‌های جدید ترجیح داده می‌شود، آشنایی با کامپوننت‌های کلاسی به درک بهتر نحوه عملکرد React کمک می‌کند. با رشد پروژه‌ها، ممکن است نیاز به استفاده از روش‌های پیشرفته‌تری برای مدیریت وضعیت مانند Context API یا Redux برای مدیریت وضعیت در سطح سراسری اپلیکیشن احساس شود، که برای برنامه‌های پیچیده‌تر و نیاز به اشتراک‌گذاری داده‌ها در بخش‌های مختلف اپلیکیشن مناسب هستند.

مطالعه بیشتر در رفرنس های خارجی:

Managing State (react.dev)

State and Lifecycle (reactjs.org)

State Management in React – Hooks, Context API and Redux (geeksforgeeks.org)

لیست کامل مقالات ” ری اکت ” ویکس سِوِن در لینک زیر :

ری اکت چیست؟

WiX/mag

ویکس مگ / مجله آموزشی ویکس سِوِن