Kako izbjeći proporno bušenje s sastavom

Fotografija rawpixel na Unsplash

React.js jedan je od najpopularnijih front-end okvira. Odličan je okvir temeljen na komponenti s deklarativnim API-jem koji omogućava programeru da korisničko sučelje misli na funkciju stanja i rekvizita, a ne kao funkciju vremena. Drugim riječima, morate opisati izgled svoje Komponente na temelju podataka koji su proslijeđeni.

Primarni način prenošenja podataka su pomoćni uređaji. Jednostavno rečeno, rekviziti su argumenti funkcija koje vraćaju JSX. U stvari, najjednostavniji oblik komponente je upravo taj: JavaScript funkcija.

const Header = rekvizit => {
    povratak(
         
            >

    ); }

Podupirači se mogu koristiti za više stvari u istoj komponenti. U gornjem primjeru ga koristimo za konfiguriranje css klase: tamne ili svijetle tematske. Također se koristi za pružanje podataka oznake zaglavlja. Tada možemo koristiti komponentu prosljeđivanjem rekvizita kao atributa u našem JSX-u, ovako:

const App = rekviziti => {
    povratak(
         
            
              ); }

Kao što vidite, rekviziti mogu biti vrlo snažni. Međutim, ako se provode na pogrešan način, s njima se može vrlo teško nositi. Jedno od najvećih "Ne ne" s rekvizitima je ono što se naziva "bušenje prokomponenta". Bušenje propi je kada se rekvizit prenosi komponenti samo s ciljem da ga prenesemo djetetu.

const Parent = ({className, naslov}) => {
    povratak(
         
            {...}                            ); }

U gornjem primjeru, potpornja naslova prosljeđuje se roditelju, ali nadređeni ga ne koristi osim da bi ga predao nadređenoj komponenti. Ovo nije idealan način prijenosa podataka. Recimo da naša dječja komponenta ima drugu podršku koju moramo iskoristiti, sada moramo provesti taj matični dio u roditeljsku komponentu samo da bismo ga potom proslijedili djetetu. Što više prolazi vrijeme i naša baza koda raste, to će naši podaci i komponente biti skloniji pogreškama. (BTW, u gornjem primjeru koristim ES6 operatora koji se zove uništavanje, o čemu možete saznati više na MDN-u)

Unatoč činjenici da znamo da je izbjegavamo, bušite uske bušenja u tiho, s nama čak i primjećujući. Evo primjera iz stvarnog života iz projekta na kojem sam radio. Radio sam na odjeljku Hero koji je imao naslov, podnaslov i popis gumba "Pozovi na akciju". S ovim sam započeo (pojednostavnio sam to na primjeru da bih ga lakše čitao):

const Hero = ({naslov, podnaslov, ctas}) => {
    povratak(
         
             {naslova} </ Title>
            <Titlova> {titl} </ titl>
            <ButtonRow>
               {ctas.map (cta => <LinkButton {... cta} />)}
            </ ButtonRow>
         </ LayoutWrapper>
    );
}</pre><p>Gornji je primjer uzeo u tri rekvizita: naslov, podnaslov i niz cta (poziv na radnju). Naslov i podnaslovi se stavljaju u njihove odgovarajuće komponente, a zatim preslikavamo ctas da dobijemo niz LinkButtona. To je prilično jednostavno pratiti i izvrsno je funkcioniralo.</p><p>Kasnije sam naišao na potrebu da imam red LinkButtona negdje drugdje u svojoj aplikaciji. Srećom, React omogućuje jednostavno ponovno korištenje koda, a ponovno sam popravio redak gumba iz svoje komponente Hero kako bih ga mogao ponovno koristiti na oba mjesta. S ovim sam završio:</p><pre>const ActionButtons = ({akcije}) => {
    povratak(
       <ButtonRow>
          {Actions.map (action => <LinkButton {... action} />)}
       </ ButtonRow>
    );
}</pre><pre>const Hero = ({naslov, podnaslov, ctas}) => {
    povratak(
         <LayoutWrapper>
            <Title> {naslova} </ Title>
            <Titlova> {titl} </ titl>
            <ActionButtons akcije = {ctas} />
         </ LayoutWrapper>
    );
}</pre><p>Jeste li vidjeli što se dogodilo? U početku to nisam ni primijetio. Bilo mi je lako jednostavno ponovno rafinirati samo onaj dio koji mi je bio potreban da nisam ni primijetio da sam upravo stvorio situaciju bušenja. Prolazio sam ctas prop u Hero komponentu samo da bih se okrenuo i proslijedio je drugoj komponenti. Kasnije bi to moglo izazvati neke velike glavobolje za mene, a sve što sam pokušao učiniti bilo je da se iskoristim za ponovno korištenje koda.</p><p>Srećom uhvatio sam se i rekodirao kod ovako:</p><pre>const Hero = ({naslov, podnaslov, djeca}) => {
    povratak(
         <LayoutWrapper>
            <Title> {naslova} </ Title>
            <Titlova> {titl} </ titl>
            {djeca}
         </ LayoutWrapper>
    );
}</pre><pre><Hero naslov = {naslov} titl = {titl}>
   <ActionButtons akcije = {akcije}
</ Heroj></pre><p>Kao što vidite, komponentu ActionButtons više ne prikazujem u mojoj komponenti Hero. Jednostavno šaljem podupirač za djecu, koji je dostupan svakoj React komponenti. Ovaj obrazac vraća kontrolu u ruku programerima da odaberu šta i ako će se tamo nešto pretvoriti. Zatim dijelim komponentu ActionButtons kao dijete komponenti Hero. To mi omogućuje da izravno prenesem podatke u komponentu ActionButtons, a da komponenta Hero uopće ne mora znati ništa o API komponenti ActionButtons.</p><p>Obrazac prolaska komponenata kao djece naziva se „Sastav“. To je moćan uzorak koji omogućava i razdvajanje komponenata i ponovnu upotrebu koda. Ako želite saznati više o sastavu i kako ga koristiti, preporučujem vam da pogledate stranicu React-a za početak o sastavu i nasljeđivanju.</p><p>Prednost koju moj kod sada ima je ta što komponenta ActionButtons-a poboljšava i mijenja, komponenta Hero ne mora znati. Hero Component je također pružio veću fleksibilnost jer više nije bila spojena s ActionButtons komponentom, tako da sada može donijeti ono što će mi možda trebati ili uopće ništa. Kako raste baza mojih kodova, moj će kôd biti mnogo održiviji.</p></div><div class="neighbor-articles"><h4 class="ui header">Vidi također</h4><a href="/question/how-to-pronounce-dirge/" title="kako se izgovara dirge">kako se izgovara dirge</a><a href="/question/nietzsche-how-to-pronounce/" title="nietzsche com es pronuncia">nietzsche com es pronuncia</a><a href="/question/how-to-become-a-millionaire-in-gta-5/" title="kako postati milijunaš u gta 5">kako postati milijunaš u gta 5</a><a href="/question/how-to-cover-a-book-with-scrapbook-paper/" title="kako pokriti knjigu papirom za bilješke">kako pokriti knjigu papirom za bilješke</a><a href="/question/how-to-get-shadowmere-back-after-he-dies/" title="kako vratiti shadowmere nakon što umre">kako vratiti shadowmere nakon što umre</a><a href="/question/how-to-bend-elements/" title="kako saviti elemente">kako saviti elemente</a><a href="/question/how-to-play-november-rain-on-piano/" title="kako svirati novembarsku kišu na klaviru">kako svirati novembarsku kišu na klaviru</a><a href="/question/how-to-say-ubiquitous/" title="kako reći sveprisutan">kako reći sveprisutan</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Vidi također</h4><a href="/article/how-to-live-a-good-life-by-changing-the-way-you-think-9c5680/" title="Kako živjeti dobar život mijenjajući način na koji razmišljate">Kako živjeti dobar život mijenjajući način na koji razmišljate</a><a href="/article/how-to-add-your-exchange-wallets-to-coinance-901158/" title="Kako dodati svoje novčanike za novac">Kako dodati svoje novčanike za novac</a><a href="/article/how-to-use-grammarly-in-ulysses-4fe3d2/" title="Kako koristiti Grammarly u Ulyssesu">Kako koristiti Grammarly u Ulyssesu</a><a href="/article/how-to-create-button-animation-with-flare-in-flutter-part3-implement-animation-in-flutter-project-88e195/" title="Kako stvoriti animaciju s gumbom Flare in Flutter? Dio 3: Implementacija animacije u Flutter projektu">Kako stvoriti animaciju s gumbom Flare in Flutter? Dio 3: Implementacija animacije u Flutter projektu</a><a href="/article/how-to-manage-your-remote-software-development-team-effectively-8d1f5a/" title="Kako učinkovito upravljati timom za udaljeni razvoj softvera">Kako učinkovito upravljati timom za udaljeni razvoj softvera</a><a href="/article/how-to-get-free-diamonds-and-keys-at-choices-game-c5c11f/" title="Kako dobiti besplatnu igru ​​Dijamanti i ključevi na izborima">Kako dobiti besplatnu igru ​​Dijamanti i ključevi na izborima</a><a href="/article/how-to-build-an-infrared-camera-at-home-for-less-than-100-part-2-21371a/" title="Kako izraditi infracrvenu kameru kod kuće za manje od 100 USD (2. dio)">Kako izraditi infracrvenu kameru kod kuće za manje od 100 USD (2. dio)</a><a href="/article/how-to-create-serverless-images-using-aws-lambda-and-chartjs-37c674/" title="Kako stvoriti slike bez poslužitelja pomoću AWS lambda i ChartJS">Kako stvoriti slike bez poslužitelja pomoću AWS lambda i ChartJS</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://uz.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="uz flag"></i></a><a href="https://bg.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="bg flag"></i></a><a href="https://et.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="ee flag"></i></a><a href="https://lt.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="lt flag"></i></a><a href="https://lv.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="lv flag"></i></a><a href="https://sr.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="rs flag"></i></a><a href="https://sl.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="si flag"></i></a><a href="https://sk.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="sk flag"></i></a><a href="https://uk.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="ua flag"></i></a><a href="https://sq.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="al flag"></i></a><a href="https://hy.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="am flag"></i></a><a href="https://is.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="is flag"></i></a><a href="https://az.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="az flag"></i></a><a href="https://kk.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="kz flag"></i></a><a href="https://fa.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="ir flag"></i></a><a href="https://tg.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="tj flag"></i></a><a href="https://ga.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="ie flag"></i></a><a href="https://be.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="by flag"></i></a><a href="https://ka.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="ge flag"></i></a><a href="https://ky.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="kg flag"></i></a><a href="https://lb.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="lu flag"></i></a><a href="https://lo.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="la flag"></i></a><a href="https://ar.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="sa flag"></i></a><a href="https://bn.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="in flag"></i></a><a href="https://ca.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="es flag"></i></a><a href="https://zh.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="cn flag"></i></a><a href="https://cs.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="cz flag"></i></a><a href="https://da.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="dk flag"></i></a><a href="https://nl.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="nl flag"></i></a><a href="https://tl.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="ph flag"></i></a><a href="https://fi.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="fi flag"></i></a><a href="https://fr.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="fr flag"></i></a><a href="https://de.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="de flag"></i></a><a href="https://el.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="gr flag"></i></a><a href="https://iw.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="il flag"></i></a><a href="https://hi.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="in flag"></i></a><a href="https://hu.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="hu flag"></i></a><a href="https://id.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="id flag"></i></a><a href="https://it.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="it flag"></i></a><a href="https://ja.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="jp flag"></i></a><a href="https://ko.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="kr flag"></i></a><a href="https://ms.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="my flag"></i></a><a href="https://mr.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="io flag"></i></a><a href="https://no.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="no flag"></i></a><a href="https://pl.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="pl flag"></i></a><a href="https://pt.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="pt flag"></i></a><a href="https://ro.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="ro flag"></i></a><a href="https://ru.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="ru flag"></i></a><a href="https://internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="es flag"></i></a><a href="https://sv.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="ch flag"></i></a><a href="https://ta.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="sg flag"></i></a><a href="https://te.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="in flag"></i></a><a href="https://th.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="th flag"></i></a><a href="https://tr.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="tr flag"></i></a><a href="https://ur.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="pk flag"></i></a><a href="https://vi.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="vn flag"></i></a></div>internautasporlapaz.org<!-- --> © <!-- -->2021<!-- --> </footer></div></div></div></body></html>