Reaktsiyaga kirish: Class komponenti va funktsional komponent o'rtasidagi farq

Siz yangi munosabatdasizmi? 5 daqiqadan kam vaqt ichida yangi narsalarni o'rganmoqchimisiz ?. Keling, reaktsiya komponenti haqida bilib olaylik.

Komponent nima?

Birinchidan, ushbu mavzuni chuqur o'rganishimizdan oldin, uning tarkibiy qismi nima ekanligini mukammal bilishimiz kerak.

Komponent (reaktsiyada) butun dasturda (va boshqalar, balki) qayta ishlatilishi mumkin bo'lgan blok yoki dastur sifatida tavsiflanadi, odatda uI elementi va uning harakati bilan bog'liq.

Endi siz asosiy narsani bilsangiz, keling, React loyihasida, Class Component va Funktsional komponentlarda yaratishingiz mumkin bo'lgan ikkita turdagi komponentlarni ko'rib chiqaylik.

Sinf komponenti

Bunga asosiy komponent deyiladi. ECMAScript 2015 yildan beri bizda javascript-da "sinf" mavjud. React ushbu sintaksisdan hayotiy tsikl bilan davlat tarkibiy qismini yaratish uchun foydalanadi. Davlat odatda bizning tarkibiy qismimiz yoki uning bolalarining xatti-harakatlarini o'zgartirish uchun ishlatiladi.

Keling, ushbu kodni buzaylik. Bu erda biz React.Componentdan funktsiyani meros qilib oladigan "JS sinfi" bor, shunda rekvizitni argument sifatida qabul qilgan konstruktorini e'lon qilamiz. Keyingi, biz ma'lumotlarni chaqiramiz, ota-sinf komponentlariga ma'lumotlarni uzatish uchun, biz ushbu turdagi komponentani yaratishda talab qilinadi.

"Rekvizit" bu biz komponentni teg sifatida ishlatadigan barcha atributlarni olgan ob'ektdir.

Lamp komponentasi asosiy taklifga ega, u matn va tugma bilan HTML blokini taqdim etadi.

Chiroqni yoqish yoki o'chirish tugmachasini bosish, bu erda bizning holatimiz o'yinga kiradi, 4-qatorda biz Lampaning holatini boshlaymiz va shundan so'ng biz yoritish usulini e'lon qilamiz, u holatni o'zgartiradi. bizning chiroqimizning.

bu "holat" - bu ba'zi bir xususiyatlarga ega bo'lgan ob'ekt bo'lib, ular darsni bajarish vaqtida o'zgaradi. Uni to'g'ridan-to'g'ri o'zgartirmaslik kerak, ammo setState usuli.

Shtatni quyidagicha o'zgartirishingiz mumkin:

Funktsional komponent

Endi, agar biz minimal, oddiy va fuqaroligi bo'lmagan tarkibiy qismni yaratishni istasak, bu sizga ishlatiladigan kod miqdorini kamaytirishga va DRY printsipini osonroq bajarishga yordam beradi. Funktsional komponent - bu ba'zi Jxs elementlarini qaytaradigan javascript funktsiyasi.

Lampochka komponentining misolini ko'rib chiqaylik.

Bu erda biz doimiy funktsiyaga egamiz, u lampState nomli xususiyatga ega bo'lgan buzilgan ob'ektni oladi, u mahalliy o'zgaruvchiga aylanadi va boshqa img yorlig'ini qaytarish to'g'ri yoki noto'g'ri ekanligini baholaymiz.

Endi biz uni Lamp komponentasida qanday qilib birgalikda ishlashi mumkinligini ko'rsatish uchun ishlatamiz.

Bu, siz tugmachani bosganingizda, lampochkaning tasviri o'zgaradi.

Kancalar haqida nima deyish mumkin?

Kancalar - bu funktsional komponentda holatni ishlatishga imkon beradigan yaqinlashib kelayotgan xususiyat. Buni ko'proq tafsilotlar bilan tushuntirish kerak, chunki biz reaktsiyani chuqurroq o'rganishimiz kerak, va menimcha, bu o'z maqolasiga loyiqdir.

O'qiganingiz uchun rahmat, agar sizga yoqsa yoki yoqmasangiz, sizga o'z mulohazalaringizni bildiring. -