Povězte o rozdílech mezi řízenými a řízenými…

Řízené komponenty spravují svůj stav pomocí useState (nebo this.state ve třídách) a přijímají data a zpětné volání funkcí přes props. Stav formuláře je například uložen v React stavu a aktualizován pomocí onChange handlerů.

Neřízené komponenty ukládají svůj stav uvnitř DOM. Pro přístup k jejich hodnotě se používá useRef (nebo React.createRef ve třídách), aby se získala reference na DOM prvek. Hodnota prvků formuláře je například přímo extrahována z DOM při odeslání.

Charakteristika	Řízená komponenta	Neřízená komponenta
Správa stavu	React State (`useState`)	DOM
Přístup ke hodnotě	Přes stav a props	Přes Refs (`useRef`)
Aktualizace	Reaktivně, při každé změně	Při explicitní akci (např. submit)
Validace	V React logice	Přes standardní HTML API nebo ručně po získání hodnoty

Příklad řízené komponenty:

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říklad neřízené komponenty:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Hodnota inputu: ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Získat hodnotu</button>
    </>
  );
}

Volba mezi nimi závisí na složitosti logiky a potřebě okamžité reakce na změny vstupu. Řízené komponenty jsou vhodnější pro složité formuláře a validaci v reálném čase. Neřízené jsou vhodné pro jednoduché formuláře nebo integraci s třetími knihovnami DOM.

Povězte o rozdílech mezi řízenými a řízenými komponentami v Reactu.