Papaskinkite apie skirtumus tarp valdomų ir nevaldomų komponentų React'e.

Valdomi komponentai valdo savo būseną naudodami useState (arba klasės this.state) ir gauna duomenis bei atgalinius iškvietimus per props. Pavyzdžiui, formos būsena saugoma React būsenos ir atnaujinama per onChange įvykius.

Nepavaldi komponentai saugo savo būseną DOM viduje. Jiems prieiti naudojamas useRef (arba klasės React.createRef), kuris leidžia gauti nuorodą į DOM elementą. Pavyzdžiui, formos elementų reikšmė tiesiogiai išgaunama iš DOM submit metu.

Savybė	Valdomas komponentas	Nepavaldi komponentas
Būsenos valdymas	React State (useState)	DOM
Reikšmės prieiga	Per state ir props	Per Refs (useRef)
Atnaujinimas	Reaktyvus, kiekvieno pakeitimo metu	Per aiškų veiksmą (pvz., submit)
Validacija	React logikoje	Per standartinį HTML API arba rankiniu būdu po reikšmės gavimo

Valdomo komponento pavyzdys:

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} />
  );
}

Nepavaldi komponento pavyzdys:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Reikšmė įvestyje: ' + inputRef.current.value);
  }

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Gauti reikšmę</button>
    </>
  );
}

Pasirinkimas tarp jų priklauso nuo logikos sudėtingumo ir poreikio greitai reaguoti į įvesties pokyčius. Valdomi komponentai yra tinkamesni sudėtingoms formoms ir realaus laiko validacijai. Nepavaldi komponentai yra patogesni paprastoms formoms arba integracijai su trečiųjų šalių DOM bibliotekomis.