Props — componentga uning parenti tomonidan uzatiladigan tashqi kirish qiymatlaridir. Atama properties so‘zining qisqartmasi. Props componentning mazmuni, variantlari va xatti-harakatini sozlaydi, lekin component ularni o‘z mulki sifatida bevosita o‘zgartirmaydi. React, Vue va boshqa component tizimlarida sintaksis farq qilsa ham one-way data flow g‘oyasi keng tarqalgan.
Ma’lumot uzatish
Parent child componentga string, number, boolean, obyekt, array, function yoki boshqa render qilinadigan kontent uzatishi mumkin.
<ArticleCard
title="Primary key"
published={true}
onOpen={() => openArticle(101)}
/>
Bu yerda title va published data, onOpen esa childdan parent mantiqini chaqirish callbackidir. Child component props nomlari orqali aniq contract taqdim etadi.
Read-only xususiyati
Child props obyektini mutate qilsa, parentga tegishli state yashirin yo‘l bilan o‘zgarishi mumkin. Framework update modeli buni kuzatmasligi yoki boshqa componentlarda kutilmagan natija paydo bo‘lishi mumkin. Child o‘zgarish talabini event yoki callback orqali bildiradi, parent esa state’ni yangilab yangi props beradi.
Obyekt prop read-only deb qaralsa ham JavaScriptdagi nested obyekt fizik jihatdan mutate qilinishi mumkin. Intizom, immutable data yoki development check bunga qarshi ishlatiladi.
Default va validation
Optional prop berilmasa default qiymat qo‘llanishi mumkin. Boolean propning mavjudligi va false qiymati framework sintaksisida farq qilishi mumkin. Default obyekt yoki array har component instance uchun alohida yaratilmasa, bir instance mutationi boshqasiga ta’sir qiladi.
TypeScript type, Vue prop declaration yoki runtime schema qabul qilinadigan prop turini tekshiradi. Static type tashqi JSONni runtime’da validatsiya qilmaydi. Required, enum yoki union componentning ruxsat etilgan variantlarini aniq ko‘rsatadi.
Children va slots
Reactda children, Vue’da slot parentga child component layouti ichiga kontent joylash imkonini beradi. Named slot header va action kabi hududlarni ajratadi. Render prop yoki scoped slot child hisoblagan qiymatni parent bergan render mantiqiga uzatishi mumkin.
Composition ko‘p sonli konfiguratsion prop o‘rnini bosadi. Bitta componentga showHeader, headerIcon, headerAlign, customHeader kabi ortiqcha variant qo‘shishdan ko‘ra header slot moslashuvchanroq bo‘lishi mumkin.
Prop drilling
Ma’lumot uzoq descendantga kerak bo‘lib, oradagi komponentlar faqat uzatish uchun prop qabul qilsa prop drilling yuz beradi. Kichik daraxtda bu oqimni ochiq ko‘rsatadi. Juda chuqur holatda context, provide/inject yoki state store ishlatilishi mumkin.
Global context har qiymat uchun yechim emas. U dependency manbasini yashirishi va barcha consumer update’iga sabab bo‘lishi mumkin. Component composition yoki state’ni yaqinroq joylashtirish avval ko‘riladi.
Referens va render
Parent har renderda yangi obyekt yoki function yaratsa, referential equality o‘zgaradi. Memoized child shuning uchun qayta render bo‘lishi mumkin. useMemo yoki useCallbackni ko‘r-ko‘rona qo‘llash ham hisob va murakkablik qo‘shadi; profiler real muammoni ko‘rsatganda ishlatiladi.
Propsga maxfiy maydonni butun database obyekt sifatida berish kerak emas. UI componentga faqat zarur data shape uzatilishi ma’lumot tarqalishini va tasodifiy chiqarishni kamaytiradi.
API evolyutsiyasi
Component kutubxonasida prop nomi va ma’nosi public API hisoblanadi. color="red" kabi past darajali prop theme o‘zgarishiga qattiq bog‘lanadi, intent="danger" semantik rolni saqlaydi. Eski prop deprecated qilinsa warning, codemod yoki migration qo‘llanmasi consumerlarni yangi variantga o‘tkazadi. Bir propning typeini stringdan murakkab obyektga birdan almashtirish breaking change bo‘ladi. Default qiymat o‘zgarishi type o‘zgarmasa ham interfeys xatti-harakatini buzishi mumkin. Component versionlashda visual va behavioral contract ham kod signature kabi tekshiriladi.
Bog‘liq tushunchalar
component, state, one-way data flow, callback, slot, prop drilling, TypeScript