کامپوننت های کنترل شده و کنترل نشده در ری اکت

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

درک کامپوننت کنترل شده

کامپوننت کنترل شده در ری اکت یک ابزار قدرتمند است که به عنوان کامپوننتی عمل می‌کند که ری اکت مسئول مدیریت و کنترل داده (یا state) است. این رویکرد تضمین می‌کند که یک منبع واحد حقیقی برای داده وجود دارد و یکپارچگی را در سراسر برنامه تضمین می‌کند.

در اینجا توضیح هر مرحله از نمودار آورده شده است:

• مرحله 1: کاربر مقدار ورودی را تغییر می‌دهد.
• مرحله 2: تابع handleChange اجرا می‌شود.
• مرحله 3: تابع handleChange مقدار جدید ورودی را از DOM دریافت می‌کند.
• مرحله 4: تابع handleChange مقدار جدید ورودی را به state کامپوننت اضافه می‌کند.
• مرحله 5: ری اکت مقدار جدید state را مشاهده می‌کند.
• مرحله 6: ری اکت UI را به‌روزرسانی می‌کند.

کامپوننت کنترل شده چیست؟

در اصل، یک کامپوننت کنترل شده یکی از مواردی است که داده - به طور معمول داده فرم ورودی - توسط مکانیزم state ری اکت کنترل می‌شود. به جای اینکه اجازه دهد DOM این داده را مدیریت کند، ری اکت عهده‌دار این مسئولیت می‌شود و اطمینان می‌دهد که مدیریت داده و تغییرات با الگوی ری اکت سازگار هستند.

نحوه کارکرد کامپوننت کنترل شده

اصول بنیادی کامپوننت کنترل شده ساده اما قدرتمند هستند:

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

استفاده از setState یا هوک useState: برای به‌روزرسانی مقادیر ذخیره‌شده در state، در گذشته از متد setState در کامپوننت کلاسی استفاده می‌شد. اما با معرفی هوک های ری اکت، هوک useState راهی کوتاهتر برای مدیریت state در کامپوننت فانکشنال ارائه می‌دهد.

انتقال وضعیت به عنوان props به کامپوننت فرزند: این اجازه می‌دهد تا کامپوننت فرزند، داده را دریافت و نمایش دهد و اطمینان از یک منبع واحد حقیقd و جریان داده ثابت را بر عهده دارد.

نمونه‌هایی از کامپوننت کنترل شده

بیایید به چند مثال بپردازیم:

فیلد ورودی متن کنترل شده:

function TextInput() {

const [text, setText] = useState('');

return (

<input type=&quottext&quot value={text} ={e => setText(e.target.value)} />

);

}

چک باکس کنترل شده:

function CheckBox() {

const [checked, setChecked] = useState(false);

return (

<input type=&quotcheckbox&quot checked={checked} ={() => setChecked(!checked)} />

);

}

منوی باز شو یا دراپ داون کنترل شده:

function SelectBox() {

const [selectedOption, setSelectedOption] = useState('');

return (

<select value={selectedOption} ={e => setSelectedOption(e.target.value)}>

<option value=&quotoption1&quot>Option 1</option>

<option value=&quotoption2&quot>Option 2</option>

</select>

);

}

مزایای کامپوننت های کنترل شده

استفاده از کامپوننت های کنترل شده در پروژه‌های React مزایای زیادی به همراه دارد:

۱. جریان داده قابل پیش‌بینی:با کامپوننت های کنترل شده، جریان داده ثابت و قابل اعتماد است. از آنجایی که React کنترل مقادیر فرم و به‌روزرسانی‌های آن‌ها را در دست دارد، احتمال کمی برای رفتارهای غیرمنتظره یا اختلاف در نمایش داده وجود دارد.

۲. ادغام با کتابخانه‌های مدیریت وضعیت:کامپوننت های کنترل شده به خوبی با کتابخانه‌های محبوب مدیریت وضعیت، مانند Redux، هماهنگ می‌شوند. این ادغام یکپارچه تضمین می‌کند که مدیریت وضعیت در کل برنامه،直观‌تر و مؤثرتر باشد و به توسعه‌دهندگان اجازه می‌دهد تا به طور مؤثر با دستکاری‌های پیچیده داده برخورد کنند.

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

۴. بازخورد کاربر:کامپوننت های کنترل شده، به خصوص در فرم‌ها، می‌توانند بازخورد فوری به کاربران ارائه دهند. این بازخورد می‌تواند شامل نمایش خطا هنگام تایپ ایمیل نامعتبر توسط کاربر یا نمایش تعداد کاراکتر در یک ناحیه متن باشد.کامپوننتهای کنترل شده، تجربیات کاربری پویا و تعاملی را ایجاد می‌کنند که قابلیت استفاده کلی را بهبود می‌بخشند.

درک کامپوننت های کنترل نشده

اکنون به بررسی کامپوننتهایی می‌پردازیم که state داخلی خود را بدون کنترل خارجی حفظ می‌کنند.

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

نحوه عملکرد کامپوننتهای کنترل نشده: کامپوننتهای کنترل نشده دارای چند ویژگی مشخص هستند:

• استفاده از ref برای دریافت مقادیر به طور مستقیم از DOM: به جای استفاده از یک کنترل‌کننده رویداد برای خواندن مقدار ورودی، می‌توانید مستقیماً از طریق ref مقدار را دریافت کنید.
• کاهش وابستگی به وضعیت ری اکت: از آنجایی که این کامپوننتها state خود را با مکانیزم state ری اکت همگام‌سازی نمی‌کنند، ممکن است برای توسعه‌دهندگانی که با جاوا اسکریپت خالص کار کرده‌اند، آشنا‌تر باشند.

نمونه‌هایی از کامپوننتهای کنترل نشده:

فیلد ورودی متن کنترل نشده با استفاده از ref:

import React, { useRef } from 'react';

const MyComponent = () => {
  const inputRef = useRef(null);

  const handleSubmit = (event) => {
    event.preventDefault();
    alert('A name was submitted: ' + inputRef.current.value);
  };

  return (
    <form ={handleSubmit}>
      <input type=&quottext&quot ref={inputRef} />
      <button type=&quotsubmit&quot>Submit</button>
    </form>
  );
};

export default MyComponent;

چک باکس کنترل نشده:

import React, { useRef } from 'react';

const CheckboxComponent = () => {
  const checkboxRef = useRef(null);

  const handleCheck = () => {
    alert('Checkbox is ' + (checkboxRef.current.checked ? 'checked' : 'unchecked'));
  };

  return (
    <div>
      <input type=&quotcheckbox&quot ref={checkboxRef} ={handleCheck} />
      <label>Click me</label>
    </div>
  );
};

export default CheckboxComponent;

مقادیر پیشفرض در کامپوننتهای کنترل نشده:

با استفاده از ویژگی defaultValue برای ورودی‌ها، می‌توانید یک مقدار اولیه را بدون نیاز به کنترل آن از طریق state در ری اکت تنظیم کنید.

<input type=&quottext&quot defaultValue=&quotDefault text&quot ref={inputRef} />

مزایای کامپوننت های کنترل نشده

سادگی و پروتوتایپ سریع

برای پروژه‌های کوچک‌تر یا فرم‌هایی که مدیریت state ممکن است اضافی باشد، کامپوننت‌های کنترل‌نشده می‌توانند سریع‌تر پیاده‌سازی شوند. شما می‌توانید از ایجاد state و event handler برای هر ورودی اجتناب کنید و فرآیند توسعه را ساده‌تر کنید.

کاهش رندر مجدد ری اکت

هر بار که مقدار یک کامپوننت کنترل‌شده تغییر می‌کند، باعث رندر مجدد در ری اکت می‌شود. در حالی که این اغلب بهینه‌سازی می‌شود و مشکل‌ساز نیست، در برخی سناریوهای به‌روزرسانی با فرکانس بالا، کامپوننت‌های کنترل‌نشده می‌توانند مزایایی از نظر عملکرد داشته باشند، زیرا برای هر تغییر ارزش، به سازوکار رندر مجدد ری اکت وابسته نیستند.

رفتار سنتی فرم HTML

برای توسعه‌ دهندگانی که از جاوا اسکریپت خالص به ری اکت می‌آیند، کامپوننت‌های کنترل‌نشده ممکن است شهودی‌تر به نظر برسند. آنها بیشتر شبیه عناصر فرم HTML سنتی رفتار می‌کنند.

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

اندازه و پیچیدگی پروژه:

برای پروژه‌های کوچک‌تر با چند ورودی، کامپوننت‌های کنترل‌نشده می‌توانند ساده‌تر باشند. اما با رشد پروژه‌ها و نیاز به تعامل بیشتر و اشتراک‌گذاری داده بین کامپوننت‌ها، کامپوننت‌های کنترل‌شده مفیدتر می‌شوند.

نیازمندی‌های اعتبارسنجی داده:

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

ترجیحات مدیریت state:

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

ملاحظات عملکردی:

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

برداشت‌های غلط رایج

1-کامپوننت‌های کنترل‌نشده یک عادت بد هستند:

این درست نیست. هم کامپوننت‌های کنترل‌شده و هم کامپوننت‌های کنترل‌نشده در React کاربردهای خود را دارند.

2-اعتبارسنجی در کامپوننت‌های کنترل‌نشده امکان‌پذیر نیست:

آن‌ها همچنان قابل اعتبارسنجی هستند، اما ممکن است فرآیند نسبت به کامپوننت‌های کنترل‌شده دستی‌تر باشد.

بهترین رویکردها

از کامپوننت‌های کنترل‌شده استفاده کنید زمانی که:

• به کنترل دقیق مقادیر و تعاملات فرم نیاز دارید.
• اعتبارسنجی بلادرنگ ضروری است.
• فرم‌های پیچیده‌ای دارید.

از کامپوننت‌های کنترل‌نشده استفاده کنید زمانی که:

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

نتیجه‌گیری

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

منابع بیشتر برای مطالعه

فرم ها در ری اکت

کتابخانه هایی مانند فرمیک و react-hook-form به شما در مدیریت state و اعتبار سنجی فرم کمک میکنند.

با کلیک روی اینجا: برام قهوه بخر