Mondja el a React-ben irányított és irányítatlan komponensek közötti különbségeket.

Az irányított komponensek a useState (vagy osztályok esetén this.state) segítségével kezelik állapotukat, és adatokat, valamint visszahívó funkciókat kapnak props-on keresztül. Például a űrlap állapota a React állapotában tárolódik, és onChange eseménykezelőkkel frissül.

Az irányítatlan komponensek saját állapotukat a DOM-ban tárolják. Az értékükhöz való hozzáféréshez a useRef (vagy osztályok esetén React.createRef) használható, hogy hivatkozást szerezzenek a DOM elemre. Az űrlapelemek értéke például közvetlenül a DOM-ból kerül kiolvasásra a submit során.

Jellemző	Irányított komponens	Irányítatlan komponens
Állapotkezelés	React állapot (useState)	DOM
Érték elérése	Állapoton és props-on keresztül	Refs (useRef) segítségével
Frissítés	Reaktív, minden változásnál	Csak explicit műveletnél (pl. submit)
Validálás	React logikában	HTML API vagy kézi értékellenőrzés után

Példa irányított komponensre:

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

Példa irányítatlan komponensre:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Input értéke: ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Érték lekérése</button>
    </>
  );
}

A választás közöttük a logika összetettségétől és a bemeneti változásokra adott azonnali reakció szükségességétől függ. Az irányított komponensek előnyösebbek összetettebb űrlapok és valós idejű validáció esetén. Az irányítatlanok alkalmasak egyszerűbb űrlapokra vagy harmadik féltől származó DOM-könyvtárak integrációjára.