Controlled (nazorat qilinadigan) va uncontrolled (nazorat qilinmaydigan) komponentlar.

Biz controlled va uncontrolled komponent terminlarini ko’p eshitamiz. Bu ikki tushunchani tushunish, Reactda komponentlarni boshqarish va ulardan foydalanishni osonlashtiradi. Ushbu postda biz nazorat qilinadigan va nazorat qilinmaydigan komponentlarni React kutubxonasi va HTML formalari nuqtai nazaridan o'rganamiz.

Reactda controlled va uncontrolled komponentlar

Controlled komponentlar

Agar komponentdagi muhim ma’lumotlar ichki statedan ko’ra propslar orqali boshqarilsa, bunday komponent controlled komponent deyiladi. Bu ota komponentga uning xatti-harakatini to'liq belgilash imkonini beradi. Controlled komponentlar maksimal darajada moslashuvchan, ammo ular ota komponentlar tomonidan props bilan to'liq sozlanishni talab qiladi.

Keling, bir misolni ko‘rib chiqamiz:

                      function OtaKomponent() {
                        const [xabar, setXabar] = useState('Salom, Dunyo!');
                        const xabarniOzgartirish = () => {
                          setXabar('Salom, React!');
                        };
                      
                        return (
                          <div>
                            <h1>Nazorat qilinadigan komponent misoli</h1>
                            <BolaKomponent xabar={xabar} />
                            <button onClick={xabarniOzgartirish}>Xabarni o'zgartirish</button>
                          </div>
                        );
                      }
                      
                      function BolaKomponent({ xabar }) {
                        return (
                          <div>
                            <p>{xabar}</p>
                          </div>
                        );
                      }
                      

Ushbu misolda, ChildComponent (bola komponent) o'zining ota komponenti tomonidan boshqariladi, ya'ni ota komponent props orqali uning xatti-harakatini boshqaradi.

Uncontrolled komponentlar

Agar komponent muhim ma’lumotlarni ichki state orqali boshqarsa, bunday komponent uncontrolled komponent deyiladi. Bunda komponent o‘zining ichki holatini ota komponentdan mustaqil ravishda boshqaradi. Uncontrolled komponentlarni ota komponent ichida ishlatish osonroq, chunki ular kamroq konfiguratsiyani talab qiladi. Lekin ular ular kamroq moslashuvchan bo'ladi.

HTML formalarida controlled va uncontrolled komponentlar

Controlled form komponentlari

Controlled form komponentlarida, forma ma'lumotlari React komponentining state (holati) tomonidan boshqariladi. Bunda form elementidagi har qanday o'zgarish stateda aks etadi va state orqali elementni yangilash mumkin bo'ladi. Bu usul form validatsiyasida (form validation) va dinamik o'zgarishlarni boshqarishda qulayroq va osonroq bo‘ladi.

Uncontrolled form komponentlari

Uncontrolled form komponentlarida, forma ma'lumotlari to‘g‘ridan-to‘g‘ri DOM (Document object model) orqali boshqariladi. Bunda forma ma’lumotlaridan foydalanish uchun state o’rniga Reactning ref nomli boshqa funksiyasi ishlatiladi.