Rääkige Reactis juhtitud ja mittejuhtitud komponentide erinevustest.

Käsitletavad komponendid haldavad oma olekut, kasutades useState (või klassi this.state) ja saavad andmeid ning tagasisidefunktsioone propside kaudu. Näiteks vormi olek salvestatakse Reacti olekus ja uuendatakse onChange sündmuste kaudu.

Mitte-kontrollitud komponendid hoiavad oma olekut DOM-i sees. Nende väärtusele pääseb ligi kasutades useRef (või klassi React.createRef), mis võimaldab saada viite DOM-elementile. Näiteks vormielementide väärtus saadakse otse DOM-ist submit'i ajal.

Omadus	Kontrollitud komponent	Mitte-kontrollitud komponent
Oleku haldamine	React State (useState)	DOM
Väärtuse ligipääs	State ja props kaudu	Refs (useRef)
Uuendamine	Reaktiivne, iga muutuse korral	Selge tegevuse ajal (nt submit)
Valideerimine	Reacti loogikas	Tavalise HTML API või käsitsi pärast väärtuse saamist

Näide kontrollitud komponendist:

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

Näide mitte-kontrollitud komponendist:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Väärtus sisendis: ' + inputRef.current.value);
  }

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Väärtuse saamine</button>
    </>
  );
}

Valik nende vahel sõltub loogika keerukusest ja vajadusest kiiresti reageerida sisestuse muutustele. Kontrollitud komponendid on sobivamad keerukamate vormide ja reaalajas valideerimise jaoks. Mitte-kontrollitud komponendid on mugavamad lihtsamate vormide või kolmanda osapoole DOM-raamatukogudega integreerimiseks.