Taqdimot/Boshqaruv komponentlar (Presentational/Container components)

React’da keng tarqalgan dizayn pattern’laridan biri ikki komponentning kombinatsiyasidir: taqdimot komponenti va konteyner(boshqaruv) komponenti. Taqdimot komponenti foydalanuvchi interfeysi(UI)ni ko’rsatadi, va konteyner komponenti UI holatini boshqaradi. Keling, hisoblagich(counter)ni misol qilib olaylik. Ushbu pattern’ni tatbiq qilgan hisoblagich quyidagicha ko’rinadi:

const PresentationalCounter = (props) => {
  return (
    <section>
      <button onClick={props.increment}>+</button>
      <button onClick={props.decrement}>-</button>
      <button onClick={props.reset}>Reset</button>
      <h1>Current Count: {props.count}</h1>
    </section>
  );
};
 
const ContainerCounter = () => {
  const [count, setCount] = useState(0);
  
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(0);
  
  return (
    <PresentationalCounter
      count={count}
      increment={increment}
      decrement={decrement}
      reset={reset}
    />
  );
};

Ushbu misolda bizda ikkita komponent mavjud: PresentationalCounter (taqdimot komponent) va ContainerCounter (konteyner komponent). Taqdimot komponent UI’ni render qiladi, konteyner komponent esa UI state’ini boshqaradi.

Nega bu pattern foydali?

Ushbu pattern bir nechta sabablarga ko’ra foydalidir, asosiy sabab esa yagona mas’uliyat tamoyili (Single Responsibility Principle). Ushbu tamoyil bizni dasturlarimizda vazifalarni ajratishga undaydi, natijada dasturlar ko’proq modulli, qayta foydalaniladigan va hatto test qilinadigan bo’ladi. Bir komponent qanday ko’rinishini va qanday ishlashini boshqarishi o’rniga, biz bu mas’uliyatlarni ajratamiz.

Afzalliklari:

• Modullilik: PresentationalCounter boshqa konteynerlarga o’tkazilishi va bir xil ko’rinishni saqlab qolishi mumkin, ContainerCounter esa boshqa holatli konteynerga almashtirilishi va funksionallikni saqlab qolishi mumkin.
• Testlash: ContainerCounter komponentini alohida unit-test qilish mumkin, PresentationalCounter komponentini esa vizual tarzda (masalan, Storybook yordamida) alohida testlash mumkin.
• Jamoaviy ishni bo’lishish: Vizual ishlarga ko’proq qiziqadigan dasturchilar PresentationalCounter ustida ishlashi, ma’lumotlar strukturalari va algoritmlar bilan ishlashni afzal ko’radigan dasturchilar esa ContainerCounter ustida ishlashi mumkin.

Ushbu ajratilgan yondashuv tufayli bizda juda ko’p imkoniyatlar mavjud. Shu sababli b boshqaruv/taqdimot komponent pattern’i katta mashhurlikka ega bo’lib, bugungi kunda ham qo’llanilmoqda. Biroq, hook’larning paydo bo’lishi komponentlarga state’ni qo’shish jarayonini yanada qulay qilib qo’ydi va konteyner komponentlardan state’ni olish uchun foydalanishni talab qilmaydi.

Bugungi kunda, ko’pgina hollarda boshqaruv/taqdimot pattern’ni hook’lar bilan almashtirish mumkin. Garchi biz ushbu pattern’dan hatto React Hooks bilan foydalana olsak ham, kichikroq dasturlarda u ortiqcha muhandislik ishi bo’lishi mumkin.