مفهوم کامپوننت‌های Controlled و Uncontrolled توی ری‌اکت

سلام دوستان 👋 توی این قسمت می‌خوایم موضوعی رو بررسی کنیم که هم توی ری‌اکت کاربرد زیادی داره و هم پای ثابت بیشتر سوالات مصاحبه‌ای هست. می‌خوایم ببینیم که کامپوننت‌های Controlled و Uncontrolled چی هستن و چه کاربردهایی دارن. این پست از مجموعه پست‌های ری‌اکت ۱۰۱ هست.

 

کامپوننت‌های Controlled و Uncontrolled یعنی چی؟ 🤔

این دو مفهوم توی مبحث فرم‌ها و نحوهٔ مدیریت کردن اطلاعات یک فرم توی یک کامپوننت ری‌اکتی مطرح میشه. در واقع یک فرم توی ری‌اکت به دو شکل می‌تونه مدیریت بشه: Controlled و Uncontrolled. که توی ادامه می‌خوایم با این روش‌ها آشنا بشیم و مزایا و معایب هر کدوم رو بررسی کنیم.

 

کامپوننت Controlled

به یک کامپوننت می‌گیم Controlled زمانی که خود ری‌اکت مسئول کنترل و مدیریت اطلاعات فرم باشه. که این کار توسط هوک useState اتفاق می‌افته. یعنی مقدار یک <input> توی useState نگهداری میشه. و هر تغییری که توی <input> رخ میده، یک کال‌بک فانکشن رو فراخونی می‌کنه:

import React, { useState } from 'react';

function ControlledForm() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted value:', value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={value} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

توی کد بالا مقدار المنت <input> داره مستقیماً از useState خونده میشه. و با تغییر این ورودی، setValue خط ۷ صدا زده میشه تا مقدار استـیت بروزرسانی بشه. اگه کد خط ۷ رو ننویسیم، مقدار استیت بروزرسانی نمیشه و در نتیجه مقدار ورودی تغییر نمی‌کنه. به این روش مدیریت فرم گفته میشه Controlled. توی این روش، فقط ری‌اکت مسئول کنترل اتفاقات فرم به حساب میاد. این روش مزایا و معایبی داره که توی ادامه اونها رو بررسی می‌کنیم.

 

کامپوننت Uncontrolled

توی این روش اطلاعات یک فرم دیگه توسط ری‌اکت و هوک useState مدیریت نمیشه. بلکه ما اون‌ها رو بصورت دستی و با استفاده از روش‌هایی که توی DOM داریم مدیریت می‌کنیم. توی این روش معمولاً از هوک useRef استفاده میشه برای کار با DOM:

import React, { useRef } from 'react';

function UncontrolledForm() {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Submitted value:', inputRef.current.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">Submit</button>
    </form>
  );
}

توی کد بالا، ورودی خط ۱۳ مثل یک المنت معمولی هست که ری‌اکت هیچ دخالتی توی مقدار و نحوهٔ بروزرسانی اون نداره. برای اینکه به این المنت دسترسی داشته باشیم، می‌تونیم از استفاده کنیم (گرچه می‌شد از هم استفاده کنیم. اما این روشی ساده‌تر به حساب میاد.) و به شکل خط ۸ می‌تونیم به مقدار ورودی دسترسی داشته باشیم.