Pastāstiet par atšķirībām starp kontrolētajiem un nekontrolētajiem komponentiem React.

Pārvaldāmās komponentes pārvalda savu stāvokli, izmantojot useState (vai klases this.state) un saņem datus un atpakaļzvanus caur props. Piemēram, formas stāvoklis tiek glabāts React stāvoklī un tiek atjaunināts ar onChange notikumiem.

Nepārvaldāmās komponentes glabā savu stāvokli DOM iekšienē. Tām piekļūt izmanto useRef (vai klases React.createRef), kas ļauj iegūt atsauci uz DOM elementu. Piemēram, formu elementu vērtības tieši tiek iegūtas no DOM sūtot.

Īpašība	Pārvaldāma komponenta	Nepārvaldāma komponenta
Stāvokļa pārvaldība	React State (useState)	DOM
Pieeja vērtībai	Caurest un props	Caurest (useRef)
Atjaunināšana	Reaģējoši, katru izmaiņu laikā	Ar skaidru darbību (piem., sūdzība)
Validācija	React loģikā	Standarta HTML API vai manuāli pēc vērtības saņemšanas

Pārvaldāmas komponentes piemērs:

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

Nepārvaldāmas komponentes piemērs:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Vērtība ievadā: ' + inputRef.current.value);
  }

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Saņemt vērtību</button>
    </>
  );
}

Izvēle starp tām ir atkarīga no loģikas sarežģītības un nepieciešamības ātri reaģēt uz ievades izmaiņām. Pārvaldāmās komponentes ir piemērotākas sarežģītām formām un reāllaika validācijai. Nepārvaldāmās komponentes ir ērti piemērotas vienkāršām formām vai integrācijai ar trešo pušu DOM bibliotēkām.