مدریریت چند state در یک کامپوننت

مقدمه

یک کامپوننت می‌تواند بیش از یک متغیر state داشته باشد. در واقع، شما می‌توانید هر چند بار که نیاز دارید، هوک useState را فراخوانی کنید. این قابلیت به شما اجازه می‌دهد تا وضعیت‌های (states) غیرمرتبط را در متغیرهای جداگانه نگهداری کنید که این کار خوانایی و قابلیت نگهداری کد شما را بهبود می‌بخشد.

چرا چندین متغیر state؟

گروه‌بندی stateهای مرتبط در یک شیء واحد می‌تواند مفید باشد، اما اگر دو state با هم ارتباط منطقی ندارند (یعنی تغییر یکی لزوماً به معنی تغییر دیگری نیست)، بهتر است آنها را در متغیرهای state جداگانه قرار دهید. این کار به شما اجازه می‌دهد تا منطق به‌روزرسانی هر state را به صورت مستقل مدیریت کنید و از ایجاد اشیاء state بزرگ و پیچیده جلوگیری کنید.

یک مثال: فرم ثبت‌نام

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

JAVASCRIPT (React)

import { useState } from 'react';

function RegistrationForm() {
  const [name, setName] = useState('');
  const [age, setAge] = useState(20);

  return (
    <div>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <button onClick={() => setAge(age + 1)}>
        Increment age
      </button>
      <p>Hello, {name}. You are {age}.</p>
    </div>
  );
}

در این کامپوننت، ما دو بار useState را فراخوانی کرده‌ایم: یک بار برای مدیریت state مربوط به نام (یک رشته) و یک بار برای مدیریت state مربوط به سن (یک عدد).

این دو state کاملاً مستقل از یکدیگر هستند. تغییر نام، تأثیری بر روی سن ندارد و بالعکس. این جداسازی، منطق کامپوننت را بسیار واضح‌تر می‌کند.

ری‌اکت چگونه stateها را ردیابی می‌کند؟

شاید برایتان سوال باشد که React چگونه می‌داند کدام state به کدام فراخوانی useState تعلق دارد، با وجود اینکه ما هیچ نامی به آنها پاس نمی‌دهیم. پاسخ در «قانون هوک‌ها» نهفته است که در درس قبل به آن اشاره کردیم: **هوک‌ها باید همیشه در هر بار رندر، به یک ترتیب یکسان فراخوانی شوند.**

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

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

اکنون که می‌دانیم چگونه state را تعریف و مدیریت کنیم، در درس بعدی به «ارتباط بین state و رویدادها» خواهیم پرداخت و خواهیم دید که چگونه می‌توانیم منطق مدیریت رویدادها را به صورت توابع جداگانه سازماندهی کرده و از آنها برای به‌روزرسانی state استفاده کنیم.