გთხოვთ, ისაუბროთ React-ში მართვად და მართვადობად არ განკუთვნილ კომპონენტებს შორის განსხვავებებზე.

მართვადი კომპონენტები მართავენ თავიანთ მდგომარეობას useState (ან კლასის this.state) მეშვეობით და იღებენ მონაცემებს და უკუკავშირს ფუნქციების სახით. მაგალითად, ფორმის მდგომარეობა ინახება React-ის მდგომარეობაში და განახლდება onChange handlers-ით.

არმართვადი კომპონენტები ინახავენ თავიანთ მდგომარეობას DOM-ის შიგნით. მათზე წვდომა ხდება useRef (ან კლასის React.createRef) გამოყენებით, რაც უზრუნველყოფს DOM ელემენტზე მითითებას. მაგალითად, ფორმის ელემენტების მნიშვნელობა პირდაპირ იღება DOM-დან სუბმიტის დროს.

მახასიათებელი	მართვადი კომპონენტი	არმართვადი კომპონენტი
მდგომარეობის მართვა	React State (useState)	DOM
მნიშვნელობის წვდომა	სტატუსი და პროპსების მეშვეობით	Refs (useRef)
განახლება	რეაქტიული, ყოველ ცვლილებაზე	აშკარა მოქმედებით (მაგ., სუბმიტი)
ვალიდაცია	React ლოგიკაში	სტანდარტული HTML API ან ხელით მიღებული მნიშვნელობით

მართვადი კომპონენტის მაგალითი:

import React, { useState } from 'react';

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

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

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
}

არმართვადი კომპონენტის მაგალითი:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('შეიყვანეთ მნიშვნელობა: ' + inputRef.current.value);
  }

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>მიღება მნიშვნელობა</button>
    </>
  );
}

მათ შორის არჩევანი დამოკიდებულია ლოგიკის სირთულეზე და საჭიროებაზე, რომ ცვლილებებზე დაუყოვნებლივ რეაგირება მოხდეს. მართვადი კომპონენტები სასურველია რთული ფორმებისთვის და რეალურ დროში ვალიდაციისთვის. არმართვადი კომპონენტები მოსახერხებელია მარტივი ფორმებისთვის ან მესამე მხარის DOM ბიბლიოთეკებთან ინტეგრაციისთვის.