سلام دوستان 👋 توی این قسمت می‌خوایم موضوعی رو بررسی کنیم که هم توی ری‌اکت کاربرد زیادی داره و هم پای ثابت بیشتر سوالات مصاحبه‌ای هست. می‌خوایم ببینیم که کامپوننت‌های 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>
  );
}

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

 

چه زمانی از کدوم روش استفاده کنیم؟

توی روش Controlled خیلی راحت‌تر می‌تونیم اطلاعات فرم رو مدیریت و ثبت کنیم. مثل اعتبارسنجی آنی روی مقدار ورودی‌ها. همچنین اعمال دستورات شرطی و داینامیک خیلی راحت‌تر قابل اجرا هست در مقایسه با زمانی که از روش Uncontrolled استفاده می‌کنیم. مثل زمانی که با تغییر یک ورودی، ورودی‌های دیگه باید نمایش داده بشن و یا مقدار خاصی رو نمایش بدن.

استفاده از روش Uncontrolled برای زمانی مناسب هست که تغییرات یک ورودی به‌اندازه‌ای زیاد هست که ممکنه با Re-render های مکرر روی عملکرد کامپوننت تاثیر منفی بذاره. مثل یک Textarea که کاربر قراره متن زیادی رو توی اون تایپ کنه:

توی برنامهٔ بالا، هر بار که توی ورودی تایپ می‌کنیم، می‌بینیم که کامپوننت ری-رندر میشه. این کار ممکنه روی عملکرد کامپوننت‌های سنگین تأثیر منفی بذاره. همچنین استفاده از روش Uncontrolled برای زمانی که یک فرم با تعداد ورودی‌های خیلی زیاد داریم و مدیریت کردن هر ورودی با استیت کار سختی به حساب بیاد می‌تونه مناسب باشه.

 

 خب دوستان امیدوارم از اطلاعاتی که بررسی کردیم استفاده کرده باشین. تا یک پست دیگه خدانگهدار 😉🌹

https://www.freecodecamp.org/news/what-are-controlled-and-uncontrolled-components-in-react/#heading-benefits-of-using-controlled-components