{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 Что такое “Compound Components”"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Compound Components (составные компоненты)"},{"type":"text","text":" — это паттерн, при котором "},{"type":"text","marks":[{"type":"bold"}],"text":"несколько связанных компонентов"},{"type":"text","text":" работают "},{"type":"text","marks":[{"type":"bold"}],"text":"вместе"},{"type":"text","text":", как единый “компонент-группа”."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 Обычно у нас есть “родитель” и “дочерние элементы”,"},{"type":"hardBreak"},{"type":"text","text":"которые "},{"type":"text","marks":[{"type":"bold"}],"text":"общаются между собой через React Context"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"вместо передачи пропсов вручную."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📦 Пример (интуитивно)"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Без паттерна"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n \n \n \n \n \n Контент 1\n Контент 2\n \n\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Минусы:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"приходятся прокидывать кучу пропсов ("},{"type":"text","marks":[{"type":"code"}],"text":"activeTab"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"setActiveTab"},{"type":"text","text":");"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"компоненты “жёстко связаны” — использовать их по отдельности неудобно."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ С паттерном Compound Components"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"Цель:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы "},{"type":"text","marks":[{"type":"code"}],"text":"Tabs"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"TabList"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"Tab"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"TabPanel"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"сами знали о своём состоянии"},{"type":"hardBreak"},{"type":"text","text":"через "},{"type":"text","marks":[{"type":"bold"}],"text":"внутренний контекст"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"чтобы код выглядел естественно:"}]}]}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"\n \n Описание\n Отзывы\n \n\n \n Контент 1\n Контент 2\n \n\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Как это работает"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1️⃣ Создаём контекст"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const TabsContext = createContext(null);\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2️⃣ Родительский компонент (Provider)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Tabs({ children }) {\n const [activeIndex, setActiveIndex] = useState(0);\n const value = useMemo(() => ({ activeIndex, setActiveIndex }), [activeIndex]);\n\n return (\n \n

{children}

\n \n );\n}\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"3️⃣ Дочерние компоненты — подписчики контекста"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function TabList({ children }) {\n return

{children}

;\n}\n\nfunction Tab({ children, index }) {\n const { activeIndex, setActiveIndex } = useContext(TabsContext);\n const isActive = index === activeIndex;\n\n return (\n setActiveIndex(index)}\n >\n {children}\n \n );\n}\n\nfunction Panels({ children }) {\n return

{children}

;\n}\n\nfunction Panel({ children, index }) {\n const { activeIndex } = useContext(TabsContext);\n return activeIndex === index ?

{children}

: null;\n}\n"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"4️⃣ Собираем “составной” компонент"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Tabs.List = TabList;\nTabs.Tab = Tab;\nTabs.Panels = Panels;\nTabs.Panel = Panel;\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Что делает контекст здесь"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Контекст используется как "},{"type":"text","marks":[{"type":"bold"}],"text":"внутренний механизм связи"},{"type":"text","text":" между компонентами,"},{"type":"hardBreak"},{"type":"text","text":"чтобы они могли "},{"type":"text","marks":[{"type":"bold"}],"text":"“знать” состояние родителя (Tabs)"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","marks":[{"type":"bold"}],"text":"не требуя props"},{"type":"text","text":" на каждом уровне."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 То есть:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"Tabs"},{"type":"text","text":" управляет состоянием (активная вкладка);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"Tabs.Tab"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"Tabs.Panel"},{"type":"text","text":" просто “подписаны” на этот контекст;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"всё синхронизируется автоматически."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ Преимущества паттерна"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Преимущество"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Описание"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🎯 Чистый API"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вложенный JSX отражает иерархию логики"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧱 Повторное использование"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компоненты можно переиспользовать независимо"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔒 Инкапсуляция"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Состояние Tabs скрыто, доступ есть только через контекст"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚙️ Гибкость"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Можно вставлять собственные компоненты между ними"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"💨 Нет prop drilling"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Никакие пропсы вручную не передаются вниз"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧩 Где это используется"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Этот паттерн используется повсюду:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"в "},{"type":"text","marks":[{"type":"bold"}],"text":"Headless UI"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"Radix UI"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"shadcn/ui"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"React Aria"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"для "},{"type":"text","marks":[{"type":"bold"}],"text":"Tabs"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"Accordion"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"Dropdown"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"Menu"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"Modal"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"Form"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"bold"}],"text":"Stepper"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Итого"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Compound Components + Context ="}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"гибкий интерфейс, где дочерние компоненты автоматически знают,"},{"type":"hardBreak"},{"type":"text","text":"в каком контексте они находятся, и синхронизируются без пропсов."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧰 Формула паттерна:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Создаёшь контекст внутри “родителя”;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Провайдишь значение через "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Дочерние компоненты достают состояние из контекста;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Экспортируешь дочерние компоненты как свойства главного."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что делает “compound components” паттерн с контекстом?

Комментарии