۱. تعریف کلی (برای شروع صحبت):
«در React، ما دو روش اصلی برای مدیریت دادههای فرمها داریم: کنترلشده (Controlled) و کنترلنشده (Uncontrolled). تفاوت اصلی در این است که چه کسی مقدار فیلدهای ورودی را در اختیار دارد و بهروزرسانی میکند.»
۲. توضیح کامپوننت کنترلشده (Controlled):
«در کامپوننتهای کنترلشده، state کامپوننت React منبع اصلی داده است. یعنی هر بار که کاربر یک کاراکتر تایپ میکند، یک رویداد
onChangeفعال شده و مقدار جدید را درuseStateذخیره میکند. سپس مقدارvalueورودی را از همان state میخوانیم.به بیان ساده: React به ورودی میگوید که چه چیزی نشان بدهد، نه برعکس.
مثال ساده:
jsx
const [name, setName] = useState(""); <input value={name} ={(e) => setName(e.target.value)} />مزیت اصلی: کنترل کامل روی داده داریم. مثلاً میتوانیم اعتبارسنجی لحظهای انجام دهیم، کاراکترها را محدود کنیم یا با هر تایپ، جایی دیگر از صفحه را بهروزرسانی کنیم.»
۳. توضیح کامپوننت کنترلنشده (Uncontrolled):
«در روش کنترلنشده، خود DOM مقدار ورودی را مدیریت میکند. ما از React نمیخواهیم که مقدار را کنترل کند؛ در عوض، وقتی نیاز داریم مقدار را بخوانیم (مثلاً هنگام ارسال فرم)، از
refاستفاده میکنیم تا مستقیماً به مقدار DOM دسترسی پیدا کنیم.به بیان ساده: به React میگوییم که فعلاً دست خود DOM باشد و فقط موقع نیاز، مقدار را از آن میگیریم.
مثال ساده:
jsx
const inputRef = useRef(null); <input ref={inputRef} defaultValue="مقدار اولیه" /> // هنگام ارسال: inputRef.current.valueاین روش بیشتر برای فرمهای ساده یا وقتی که با کتابخانههای غیر React کار میکنیم، مناسب است.»
۴. نکته مهم در Next.js (برای نشان دادن دانش فریمورک):
«در Next.js این تفاوت با رندر سمت سرور (SSR) گره میخورد. چون کامپوننتهای کنترلشده به state سمت کلاینت وابستهاند، هنگام هیدریشن (Hydration) باید دقت کنیم که مقدار اولیه در سرور و کلاینت یکی باشد. برای جلوگیری از خطا، معمولاً از مقدار
defaultValueدر کامپوننتهای کنترلنشده یا استفاده ازuseEffectبرای مقداردهی اولیه در سمت کلاینت استفاده میکنیم.همچنین در Next.js 13 به بعد، برای فرمها معمولاً از Server Actions استفاده میکنیم که اغلب با فرمهای کنترلنشده یا ترکیبی از
useFormStateکار میکنند تا بهترین تجربه را هم در سمت سرور و هم کلاینت داشته باشیم.»
۵. جمعبندی و مقایسه سریع (برای اینکه نشان دهید انتخاب آگاهانه دارید):
۶. جمله پایانی (جمعبندی نهایی برای مصاحبه):
«به طور کلی، در پروژههای واقعی، اغلب از کامپوننتهای کنترلشده استفاده میکنیم چون انعطافپذیری و قابلیت پیشبینی بیشتری دارند. اما دانستن روش کنترلنشده هم ضروری است، مخصوصاً وقتی با فرمهای خیلی سنگین یا کتابخانههای jQuery کار میکنیم. در Next.js هم این انتخاب را بر اساس نیاز به SSR و تعامل با سرور تنظیم میکنیم.»
وقتی این را توضیح میدهید، حتماً یک مثال عملی از کار روزمره بزنید. مثلاً بگویید: «در پروژه قبلی، برای فرم ثبتنام که اعتبارسنجی رمز عبور لحظهای داشت، از کنترلشده استفاده کردم، اما برای فیلد جستجوی سادهای که فقط موقع کلیک دکمه مقدارش را میخواندم، از کنترلنشده با ref بهره بردم.» این نشان میدهد که فقط تئوری بلد نیستید، بلکه تصمیمگیری عملی هم دارید.
