React'da boshqariladigan va boshqarilmaydigan komponentlar o'rtasidagi farqlar haqida gapiring.

Boshqariladigan komponentlar useState (yoki sinflarda this.state) orqali o'z holatini boshqaradi va propslar orqali ma'lumotlar va qaytish funksiyalarini oladi. Masalan, forma holati React holatida saqlanadi va onChange hodisasi bilan yangilanadi.

Boshqarilmaydigan komponentlar o'z holatini DOM ichida saqlaydi. Ularning qiymatiga kirish uchun useRef (yoki sinflarda React.createRef) ishlatiladi, bu DOM elementiga havola olish uchun. Masalan, forma elementlarining qiymati to'g'ridan-to'g'ri DOMdan olinadi yuborish vaqtida.

Xususiyat	Boshqariladigan komponent	Boshqarilmaydigan komponent
Holatni boshqarish	React holati (useState)	DOM
Qiymatga kirish	Holat va props orqali	Refs (useRef) orqali
Yangilanish	Reaktiv, har o'zgarishda	Aniq harakatda (masalan, yuborish)
Validatsiya	React mantiqida	Standart HTML API yoki qo'lda qiymat olgach

Misol uchun boshqariladigan komponent:

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

Misol uchun boshqarilmaydigan komponent:

import React, { useRef } from 'react';

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

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

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Qiymatni ol</button>
    </>
  );
}

Ularni tanlash kirish o'zgarishlariga darhol javob berish va mantiq murakkabligiga bog'liq. Boshqariladigan komponentlar murakkab shakllar va real vaqtda validatsiya uchun afzalroq. Boshqarilmaydiganlar oddiy shakllar yoki uchinchi tomon DOM kutubxonalar bilan integratsiya uchun mos keladi.