React-də idarə olunan və idarə olunmayan komponentlər arasındakı fərqlər haqqında danışın.

İdarə olunan komponentlər useState (və ya siniflərdə this.state) vasitəsilə öz vəziyyətlərini idarə edir və məlumatları və geri çağırış funksiyalarını props vasitəsilə alır. Məsələn, formanın vəziyyəti React vəziyyətində saxlanılır və onChange hadisə idarəediciləri ilə yenilənir.

İdarə olunmayan komponentlər öz vəziyyətlərini DOM daxilində saxlayır. Onların dəyərinə daxil olmaq üçün useRef (və ya siniflərdə React.createRef) istifadə olunur və DOM elementinə istinad alınır. Məsələn, form elementlərinin dəyəri göndərmə zamanı birbaşa DOM-dan çıxarılır.

Xüsusiyyət	İdarə olunan komponent	İdarə olunmayan komponentlər
Vəziyyətin idarə olunması	React Vəziyyəti (useState)	DOM
Dəyərə giriş	Vəziyyət və props vasitəsilə	Refs (useRef) vasitəsilə
Yeniləmə	Reaktiv, hər dəyişiklikdə	Aydın hərəkətdə (məsələn, göndərmə)
Doğrulama	React məntiqində	Standart HTML API və ya əl ilə dəyər alınması sonrası

Nümunə idarə olunan 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} />
  );
}

Nümunə idarə olunmayan komponent:

import React, { useRef } from 'react';

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

  const handleClick = () => {
    alert('Input dəyəri: ' + inputRef.current.value);
  }

  return (
    <> 
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Dəyəri al</button>
    </>
  );
}

Aralarındakı seçim, giriş dəyişikliklərinə dərhal cavab vermək və məntiqin mürəkkəbliyinə bağlıdır. İdarə olunan komponentlər mürəkkəb formalar və real vaxtda doğrulama üçün üstünlük təşkil edir. İdarə olunmayanlar sadə formalar və ya üçüncü tərəf DOM kitabxanaları ilə inteqrasiya üçün uyğundur.