Component — foydalanuvchi interfeysining ma’lum vazifa va chegaraga ega, qayta ishlatilishi mumkin bo‘lgan qismidir. Button, input, modal, card yoki butun sahifa component sifatida ifodalanishi mumkin. Component odatda tashqi kirishlarni qabul qiladi, o‘z holatini boshqarishi mumkin va UI natijasini render qiladi.
Interfeys chegarasi
Yaxshi component tashqi API va ichki implementatsiyani ajratadi. Props, slots, events yoki methodlar tashqi shartnomani tashkil etadi. Parent component rangni belgilash uchun ichki DOM selectoriga tayanmasdan, hujjatlashtirilgan variant beradi.
<Button variant="primary" disabled={saving}>
Saqlash
</Button>
variant va disabled contractning qismi, button ichidagi icon yoki markup esa o‘zgarishi mumkin. APIga har bir CSS piksel uchun prop qo‘shish componentni ortiqcha murakkablashtiradi.
Composition
Composition kichik componentlarni birlashtirib murakkab interfeys quradi. Card ichiga header, body va action slotlari berilishi mumkin. Inheritance UI componentlarda kamroq qo‘llanadi, chunki composition turli kontent va xatti-harakatni moslashuvchan birlashtiradi.
Compound componentlar umumiy context orqali hamkorlik qiladi, masalan Tabs, TabList va TabPanel. Ular keyboard va ARIA aloqalarini markaziy boshqaradi.
State va props
Props tashqaridan berilgan, component uchun read-only kirish hisoblanadi. State esa vaqt davomida o‘zgaradigan ichki holat. Bir ma’lumot bir nechta siblingga kerak bo‘lsa, state umumiy parentga ko‘tarilishi yoki storega joylashtirilishi mumkin.
Derived state’ni alohida saqlash ikki source of truth yaratadi. Propsdan hisoblanadigan qiymat render vaqtida yoki memoization orqali hosil qilinadi. Side effect state update bilan cheksiz render sikli yaratmasligi kerak.
Hayot sikli
Component mount bo‘lganda DOM va subscription yaratiladi, update’da kirish yoki state o‘zgaradi, unmount’da resurslar tozalanadi. Timer, event listener, WebSocket yoki request cancellation cleanup talab qiladi. Aks holda yopilgan component ham callback yoki xotirani ushlab turadi.
Framework lifecycle nomlari farq qiladi, lekin resurs ownership tamoyili bir xil: qaysi component yaratgan bo‘lsa, o‘sha uni tugatadi.
Presentational va container
Presentational component asosan ko‘rinish va interactionni, container esa data olish va biznes oqimini boshqarishi mumkin. Bu qat’iy majburiy bo‘linish emas. Maqsad database yoki API tafsilotini oddiy button va layoutga tarqatmaslikdir.
Headless component UI style bermasdan state, keyboard va accessibility xatti-harakatini beradi. Iste’molchi markup va theme’ni o‘zi chizadi.
Testlash
Component testi foydalanuvchi ko‘radigan role, matn va event bo‘yicha ishlaydi. Ichki private function yoki DOM tuzilishga haddan tashqari bog‘lanish refactoringni keraksiz buzadi. Visual regression turli state va viewportdagi ko‘rinishni solishtiradi.
Accessibility testi keyboard, focus, label va screen reader semantikasini qamrab oladi. Component katalogi variant, loading, empty, error va edge holatlarni alohida ko‘rsatishi mumkin.
Server va client component
Ba’zi zamonaviy frameworklar componentni serverda yoki clientda bajariladigan turga ajratadi. Server component database yoki server resursiga yaqin ishlaydi va client JavaScript hajmini kamaytirishi mumkin, lekin browser event va local state’dan bevosita foydalana olmaydi. Client component interaction va browser API uchun kerak. Chegara orqali uzatiladigan props serializable bo‘lishi talab qilinishi mumkin. Serverda maxfiy ma’lumot o‘qilgan bo‘lsa, uning faqat zarur qismi clientga beriladi. Rendering joyi authorizationni o‘zgartirmaydi: server component ham foydalanuvchi ruxsatini tekshiradi.
Bog‘liq tushunchalar
UI, props, state, composition, lifecycle, design system, component testing