React'teki Bileşik Bileşenler

Bileşik bileşenler, geliştiricilerin bileşenler içinde durumu ve mantığı paylaşmak için daha anlamlı ve esnek API'ler oluşturmasına yardımcı olur. Bu öğretici, bu gelişmiş kalıbı kullanarak bileşenleri oluşturmak için Context API ve React kullanarak bunun nasıl başarılabileceğini açıklar.

Not : Devam edebilmek için, React ve Context API'nin nasıl çalıştığı hakkında temel bilgilere sahip olmanız gerekir.

Bileşik Bileşen Nedir?

Bileşik bileşenlerin, bir bileşen grubunun durumunu ve davranışını kapsayan, ancak yine de değişken parçalarının işleme kontrolünü harici kullanıcıya veren bir model olduğu söylenebilir.

Yukarıdaki tanımdan, anahtar kelimeleri not alarak: durum ve davranış . Bu, bileşik bileşenin durumla ilgilendiğini anlamamıza yardımcı olur (yani, bileşenin ebeveyni olan harici bir kullanıcı tarafından çevrelenen bir bileşende durumun nasıl davrandığını).

Bileşik bileşenlerin amacı, üst ve alt bileşenler arasındaki iletişim için daha anlamlı ve esnek bir API sağlamaktır.

HTML'deki <select> ve <option> etiketleri gibi düşünün:

 <select> <option value="volvo">Volvo</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select>

select etiketi, HTML'deki öğeleri seçmek için bir açılır menü için kullanılan option etiketi ile birlikte çalışır. Burada <select> , kullanıcı arayüzünün durumunu yönetir, ardından <option> öğeleri, <select> öğesinin nasıl çalışması gerektiğine göre yapılandırılır. React'teki bileşik bileşenler, pervane sondajını önlemeye yardımcı olan bildirimsel bir UI bileşeni oluşturmak için kullanılır.

Prop delme, propları birden çok alt bileşenden geçiriyor. Bu aynı zamanda “kod kokusu” dedikleri şeydir. Destek sondajının en kötü yanı, ana bileşen yeniden oluşturulduğunda, alt bileşenlerin de yeniden oluşturulacağı ve bileşen üzerinde bir domino etkisine neden olacağıdır. Daha sonra inceleyeceğimiz React Context API'yi kullanmak iyi bir çözüm olacaktır.

Bileşik Bileşenleri React'te Uygulama

Bu bölüm, React'te yapı bileşenlerinin bileşik bileşen modelini benimseyen uygulamamızda kullanabileceğimiz paketleri açıklar. Bu örnek, @reach UI paketindeki bir Menu bileşenidir.

 import { Menu, MenuList, MenuButton, MenuItem, MenuItems, MenuPopover, MenuLink, } from "@reach/menu-button"; import "@reach/menu-button/styles.css";

Menu bileşenini kullanmanın bir yolu:

 function Example() { return ( <Menu> <MenuButton>Actions</MenuButton> <MenuList> <MenuItem>Download</MenuItem> <MenuLink to="view">View</MenuLink> </MenuList> </Menu> ); }

Yukarıdaki örnek kod, Menu , MenuButton , MenuList , MenuItem ve MenuLink öğelerinin tümünün @reach/menu-button içe aktarıldığını gördüğünüz bileşik bileşenlerin uygulamalarından biridir. Tek bir bileşeni dışa aktarmanın aksine, ReachUI, MenuButton , MenuList , MenuItem ve MenuLink olan alt bileşenlerine eşlik eden Menu olan bir üst bileşeni dışa aktarır.

Bileşik Bileşenleri Ne Zaman Kullanmalısınız?

Bir React geliştiricisi olarak, aşağıdakileri yapmak istediğinizde bileşik bileşenleri kullanmalısınız:

• Yeniden kullanılabilir bileşenler oluşturmaya ilişkin sorunları çözün;
• Minimum bağlantı ile yüksek düzeyde yapışkan bileşenlerin geliştirilmesi;
• Bileşenler arasında mantığı paylaşmanın daha iyi yolları.

Bileşik Bileşenlerin Artıları ve Eksileri

Bileşik bileşen, React geliştirici araç setinize eklemek için harika bir React modelidir. Bu bölümde, bileşik bileşenleri kullanmanın artılarını ve eksilerini ve bu geliştirme modelini kullanarak bileşenler oluşturmaktan öğrendiklerimi belirteceğim.

Artıları

• Ayrılık endişesi
  Ana bileşende tüm UI durum mantığına sahip olmak ve bunu dahili olarak tüm alt bileşenlere iletmek, sorumluluğun net bir şekilde bölünmesini sağlar.

• Azaltılmış Karmaşıklık
  Özel bileşenlerine özellikleri aktarmak için pervane delmesinin aksine, alt aksesuarlar, bileşik bileşen desenini kullanarak ilgili alt bileşenlerine gider.

Eksileri

Bileşik bileşen modeliyle React'te bileşen oluşturmanın en büyük dezavantajlarından biri, yalnızca ana bileşenin direct children alt öğelerinin aksesuarlara erişebilmesidir, yani bu bileşenlerin hiçbirini başka bir bileşene saramayız.

 export default function FlyoutMenu() { return ( <FlyOut> {/* This breaks */} <div> <FlyOut.Toggle /> <FlyOut.List> <FlyOut.Item>Edit</FlyOut.Item> <FlyOut.Item>Delete</FlyOut.Item> </FlyOut.List> </div> </FlyOut> ); }

Bu soruna bir çözüm, React.createContext API'sini kullanarak durumu dolaylı olarak paylaşmak için esnek bileşik bileşen modelini kullanmak olabilir.

Context API, React'te yapı bileşenlerinin bileşik bileşen desenini kullanarak oluştururken React durumunu iç içe geçmiş bileşenlerden geçirmeyi mümkün kılar. Bu mümkündür, çünkü context , verileri her düzeyde manuel olarak aşağı aktarmak zorunda kalmadan bileşen ağacından aşağıya iletmek için bir yol sağlar. Context API'yi kullanmak, son kullanıcıya birçok esneklik sağlar.

React'te Bileşik Bileşenlerin Bakımı

Bileşik bileşenler, React uygulamaları içinde durumu paylaşmak için daha esnek bir yol sağlar, bu nedenle React uygulamalarınızda bileşik bileşenleri kullanmak, uygulamalarınızın bakımını ve fiilen hata ayıklamasını kolaylaştırır.

Demo Oluşturma

Bu yazıda, bileşik bileşenler desenini kullanarak React'te bir akordeon bileşeni oluşturacağız. Bu öğreticide oluşturacağımız bileşen, Bağlam API'sini kullanarak bileşen içinde esnek ve durumu paylaşan özel yapım bir akordeon bileşeni olacaktır.

Hadi gidelim!

Öncelikle aşağıdakileri kullanarak bir React uygulaması oluşturalım:

 npx create-react-app accordionComponent cd accordionComponent npm start

veya

 yarn create react-app accordionComponent cd accordionComponent yarn start

Yukarıdaki komutlar bir React uygulaması oluşturur, dizini React projesine değiştirir ve geliştirme sunucusunu başlatır.

Not : Bu eğitimde, bileşenlerimizi biçimlendirmeye yardımcı olması için styled-components kullanacağız.

styled-components yüklemek için aşağıdaki komutu kullanın:

 yarn add styled-components

veya

 npm install --save styled-components

src klasöründe, component adında yeni bir klasör oluşturun. Burası tüm bileşenlerimizin yaşayacağı yer. Bileşenler klasörü içinde iki yeni dosya oluşturun: accordion.js ve accordion.styles.js .

accordion.styles.js dosyası, Accordion bileşeni için stilimizi içerir (stilimiz styled-components kullanılarak yapılmıştır).

 import styled from "styled-components"; export const Container = styled.div` display: flex; border-bottom: 8px solid #222; `;

Yukarıda, styled-components adlı css-in-js kitaplığını kullanan stil bileşenlerine bir örnek verilmiştir.

accordion.styles.js dosyası içinde kalan stilleri ekleyin:

 export const Frame = styled.div` margin-bottom: 40px; `; export const Inner = styled.div` display: flex; padding: 70px 45px; flex-direction: column; max-width: 815px; margin: auto; `; export const Title = styled.h1` font-size: 40px; line-height: 1.1; margin-top: 0; margin-bottom: 8px; color: black; text-align: center; `; export const Item = styled.div` color: white; margin: auto; margin-bottom: 10px; max-width: 728px; width: 100%; &:first-of-type { margin-top: 3em; } &:last-of-type { margin-bottom: 0; } `; export const Header = styled.div` display: flex; flex-direction: space-between; cursor: pointer; margin-bottom: 1px; font-size: 26px; font-weight: normal; background: #303030; padding: 0.8em 1.2em 0.8em 1.2em; user-select: none; align-items: center; img { filter: brightness(0) invert(1); width: 24px; user-select: none; @media (max-width: 600px) { width: 16px; } } `; export const Body = styled.div` font-size: 26px; font-weight: normal; line-height: normal; background: #303030; white-space: pre-wrap; user-select: none; overflow: hidden; &.closed { max-height: 0; overflow: hidden; transition: max-height 0.25ms cubic-bezier(0.5, 0, 0.1, 1); } &.open { max-height: 0px; transition: max-height 0.25ms cubic-bezier(0.5, 0, 0.1, 1); } span { display: block; padding: 0.8em 2.2em 0.8em 1.2em; } `;

Akordeon bileşenimizi oluşturmaya başlayalım. accordion.js dosyasına aşağıdaki kodu ekleyelim:

 import React, { useState, useContext, createContext } from "react"; import { Container, Inner, Item, Body, Frame, Title, Header } from "./accordion.styles";

Yukarıda, bileşik bileşenleri kullanarak akordeon bileşenimizi oluşturmamıza yardımcı olacak useState , useContext ve createContext kancalarını içe aktarıyoruz.

React belgeleri, context , her düzeyde manüel olarak donanımları aşağı aktarmak zorunda kalmadan veriyi bileşen ağacından geçirmenin bir yolunu sağlamaya yardımcı olduğunu açıklar.

accordion.js dosyamızda daha önce içe aktardıklarımıza baktığınızda, bileşenlerimizi daha hızlı oluşturmamıza yardımcı olacak stillerimizi bileşen olarak içe aktardığımızı fark edeceksiniz.

Devam edeceğiz ve onlara ihtiyaç duyan bileşenlerle veri paylaşacak olan bileşen için bağlamımızı oluşturacağız:

 const ToggleContext = createContext(); export default function Accordion({ children, ...restProps }) { return ( <Container {...restProps}> <Inner>{children}</Inner> </Container> ); }

Yukarıdaki kod parçacığındaki Container ve Inner bileşenleri, styled-components ( css-in-js kitaplığından) kullanarak bileşenlerimiz için stiller oluşturduğumuz ./accordion.styles.js dosyamızdandır. Container bileşeni, bileşik bileşenleri kullanarak oluşturduğumuz tüm Accordion barındırır.

Burada createContext() yöntemini kullanarak bir bağlam nesnesi oluşturuyoruz, bu nedenle React bu Context nesnesine abone olan bir bileşen oluşturduğunda, ağaçta en yakın eşleşen Sağlayıcıdan gelen geçerli bağlam değerini okuyacaktır.

Ardından, Akordeon olan temel bileşenimizi de oluşturuyoruz; children ve herhangi bir restProps alır. Bu, Akordeonun alt bileşenlerini barındıran ana bileşenimizdir.

accordion.js dosyası içinde başka alt bileşenler oluşturalım:

 Accordion.Title = function AccordionTitle({ children, ...restProps }) { return <Title {...restProps}>{children}</Title>; }; Accordion.Frame = function AccordionFrame({ children, ...restProps }) { return <Frame {...restProps}>{children}</Frame>; };

dikkat edin . ana Akordeon bileşeninden sonra; bu, alt bileşeni üst bileşenine bağlamak için kullanılır.

Devam edelim. Şimdi accordion.js dosyasına aşağıdakileri ekleyin:

 Accordion.Item = function AccordionItem({ children, ...restProps }) { const [toggleShow, setToggleShow] = useState(true); return ( <ToggleContext.Provider value={{ toggleShow, setToggleShow }}> <Item {...restProps}>{children}</Item> </ToggleContext.Provider> ); }; Accordion.ItemHeader = function AccordionHeader({ children, ...restProps }) { const { isShown, toggleIsShown } = useContext(ToggleContext); return ( <Header onClick={() => toggleIsShown(!isShown)} {...restProps}> {children} </Header> ); }; Accordion.Body = function AccordionHeader({ children, ...restProps }) { const { isShown } = useContext(ToggleContext); return ( <Body className={isShown ? "open" : "close"}> <span>{children}</span> </Body> ); };

Burada, tümü Accordion ana bileşeninin çocukları olan bir Body , Header ve Item bileşeni oluşturuyoruz. İşte bu noktada zorlaşmaya başlayabilir. Ayrıca, burada oluşturulan her bir alt bileşenin ayrıca bir child prop ve children restprops .

Item alt bileşeninden, durumumuzu useState kancasını kullanarak başlattık ve doğru olarak ayarladık. Ardından, Context Object olan accordion.js dosyasının en üst seviyesinde bir ToggleContext oluşturduğumuzu ve React bu Context nesnesine abone olan bir bileşen oluşturduğunda, en yakın eşleşen Sağlayıcıdan geçerli bağlam değerini okuyacağını unutmayın. ağaçta.

Her Context nesnesi, tüketen bileşenlerin bağlam değişikliklerine abone olmasına izin veren bir Provider React bileşeniyle birlikte gelir.

provider bileşeni, bu sağlayıcının torunları olan tüketen bileşenlere geçirilecek bir value propunu kabul eder ve burada, toggleShow olan mevcut durum değerini ve mevcut durumun değerini ayarlama yöntemi olan setToggleShow . Bunlar, bağlam nesnemizin, destek sondajı olmadan bileşenimiz etrafında durumu nasıl paylaşacağını belirleyen değerdir.

Ardından Accordion header alt bileşenimizde, bağlam nesnesinin değerlerini yok ediyoruz, ardından toggleShow mevcut durumunu değiştiriyoruz. Yani yapmaya çalıştığımız Header'a tıklandığında akordeonumuzu gizlemek veya göstermek.

Accordion.Body bileşenimizde, bileşenin mevcut durumu olan toggleShow da yok ediyoruz, ardından toggleShow değerine bağlı olarak, Accordion.Body bileşeninin gövdesini gizleyebilir veya içeriğini gösterebiliriz.

accordion.js dosyamız bu kadar.

Şimdi Context ve Compound components hakkında öğrendiğimiz her şeyin nasıl bir araya geldiğini göreceğimiz yer burasıdır. Ama ondan önce data.json adında yeni bir dosya oluşturalım ve içine aşağıdaki içeriği yapıştıralım:

 [ { "id": 1, "header": "What is Netflix?", "body": "Netflix is a streaming service that offers a wide variety of award-winning TV programs, films, anime, documentaries and more – on thousands of internet-connected devices.\n\nYou can watch as much as you want, whenever you want, without a single advert – all for one low monthly price. There's always something new to discover, and new TV programs and films are added every week!" }, { "id": 2, "header": "How much does Netflix cost?", "body": "Watch Netflix on your smartphone, tablet, smart TV, laptop or streaming device, all for one low fixed monthly fee. Plans start from £5.99 a month. No extra costs or contracts." }, { "id": 3, "header": "Where can I watch?", "body": "Watch anywhere, anytime, on an unlimited number of devices. Sign in with your Netflix account to watch instantly on the web at netflix.com from your personal computer or on any internet-connected device that offers the Netflix app, including smart TVs, smartphones, tablets, streaming media players and game consoles.\n\nYou can also download your favorite programs with the iOS, Android, or Windows 10 app. Use downloads to watch while you're on the go and without an internet connection. Take Netflix with you anywhere." }, { "id": 4, "header": "How do I cancel?", "body": "Netflix is flexible. There are no annoying contracts and no commitments. You can easily cancel your account online with two clicks. There are no cancellation fees – start or stop your account at any time." }, { "id": 5, "header": "What can I watch on Netflix?", "body": "Netflix has an extensive library of feature films, documentaries, TV programs, anime, award-winning Netflix originals, and more. Watch as much as you want, any time you want." } ]

Bu, akordeon bileşenimizi test etmek için çalışacağımız verilerdir.

Öyleyse devam edelim. Neredeyse bitirdik ve bu makaleyi izleyerek çok şey öğrendiğinize inanıyorum.

Bu bölümde, App.js dosyamızda kullanmak için üzerinde çalıştığımız ve bileşik bileşenler hakkında öğrendiğimiz her şeyi bir araya getireceğiz ve halihazırda web'de sahip olduğumuz verileri görüntülemek için Array.map işlevini kullanacağız. sayfa. Ayrıca App.js içinde durum kullanımının olmadığına dikkat edin; tek yaptığımız belirli bileşenlere veri aktarmaktı ve Context API diğer her şeyle ilgilendi.

Şimdi son kısma geçelim. App.js aşağıdakileri yapın:

 import React from "react"; import Accordion from "./components/Accordion"; import faqData from "./data"; export default function App() { return ( <Accordion> <Accordion.Title>Frequently Asked Questions</Accordion.Title> <Accordion.Frame> {faqData.map((item) => ( <Accordion.Item key={item.id}> <Accordion.Header>{item.header}</Accordion.Header> <Accordion.Body>{item.body}</Accordion.Body> </Accordion.Item> ))} </Accordion.Frame> </Accordion> ); }

App.js dosyanızda, Bileşik Bileşen Akordeonumuzu dosya yolundan içe aktardık, ardından yapay verilerimizi de içe aktardık, veri dosyamızdaki tek tek öğeleri almak için yapay verilerle eşleştirdik, sonra bunları ilgili Ayrıca, tek yapmamız gereken çocukları ilgili bileşene geçirmek olduğunu fark edeceksiniz, Context API, doğru bileşene ulaşmasını sağlamakla ilgilenir ve herhangi bir sondaj yapılmamıştır.

Nihai ürünümüz şöyle görünmelidir:

Bileşik Bileşenlere Alternatif

Bileşik bileşenleri kullanmanın bir alternatifi, Render Props API'sini kullanmak olabilir. React'te Render Prop terimi, değeri bir fonksiyon olan bir prop kullanarak React bileşenleri arasında kod paylaşımına yönelik bir tekniği ifade eder. Oluşturma desteğine sahip bir bileşen, kendi oluşturma mantığını uygulamak yerine bir React öğesi döndüren ve onu çağıran bir işlev alır.

Bir bileşenden veriye ihtiyaç duyan bir alt bileşene veri iletmek, iç içe bileşenleriniz olduğunda, derinlemesine detaylandırmaya neden olabilir. Bu, bileşenler arasında veri paylaşmak için Context kullanmanın, render prop yöntemine göre avantajıdır.

Çözüm

Bu yazıda, bileşik bileşen kalıbı olan gelişmiş React kalıplarından birini öğrendik. Bileşeninizi oluşturmak için bileşik bileşen desenini kullanarak React'te yeniden kullanılabilir bileşenler oluşturmak için harika bir yöntemdir, bileşeninizde size çok fazla esneklik sunar. Şu anda bileşeninizin gerektirdiği esneklik değilse, Render Prop'u kullanmayı tercih edebilirsiniz.

Bileşik bileşenler, tasarım sistemlerinin oluşturulmasında en çok yardımcı olanlardır. Ayrıca, Context API'sini kullanarak bileşenlerin içindeki durumu paylaşma sürecinden geçtik.

• Bu eğitimin kodu Codesandbox'ta bulunabilir.