Come evitare la perforazione con prop della composizione

Foto di rawpixel su Unsplash

React.js è uno dei framework front-end più popolari. È un ottimo framework basato su componenti con un'API dichiarativa che consente allo sviluppatore di pensare all'interfaccia utente come una funzione di stato e oggetti di scena e non come una funzione del tempo. In altre parole, puoi descrivere l'aspetto del tuo Componente in base ai dati passati.

Il modo principale in cui i dati vengono trasmessi è tramite oggetti di scena. In poche parole, gli oggetti di scena sono gli argomenti delle funzioni che restituiscono JSX. In effetti, la forma più semplice di un componente è proprio questa: una funzione JavaScript.

const Header = props => {
    ritorno(
         
            

{props.title}               ); }

I puntelli possono essere utilizzati per più cose nello stesso componente. Nell'esempio sopra, lo stiamo usando per configurare una classe css: scuro o chiaro. Viene anche utilizzato per fornire i dati del tag header. Possiamo quindi usare il componente passando gli oggetti di scena come attributi nel nostro JSX, in questo modo:

const App = props => {
    ritorno(
         
            
              ); }

Come puoi vedere, gli oggetti di scena possono essere molto potenti. Tuttavia, se vengono implementati nel modo sbagliato, possono essere molto difficili da gestire. Uno dei più grandi "No No" con gli oggetti di scena è quello che viene chiamato "perforazione dell'elica". La perforazione dell'elica è quando un'elica viene passata a un componente solo al solo scopo di trasmetterla a un bambino.

const Parent = ({className, title}) => {
    ritorno(
         
            {...}                            ); }

Nell'esempio sopra, l'elica del titolo viene passata al genitore, ma il genitore non lo utilizza se non per consegnarlo al componente figlio. Questo non è un modo ideale per passare i dati. Supponiamo che il nostro componente figlio abbia un altro oggetto di cui dobbiamo approfittare, ora dobbiamo passare quell'elemento nel componente genitore solo per poi passarlo al figlio. Man mano che passa il tempo e cresce la nostra base di codice, tanto più saranno soggetti a errori i nostri dati e componenti. (A proposito, nell'esempio sopra sto sfruttando un operatore ES6 chiamato destructuring, di cui puoi saperne di più su MDN)

Nonostante sappiamo che lo evitiamo, la perforazione dell'elica si insinua silenziosamente senza che ce ne accorgiamo. Ecco un esempio di vita reale di un progetto a cui stavo lavorando. Stavo lavorando su una sezione Hero che aveva un titolo, un sottotitolo e un elenco di pulsanti "Invito all'azione". Questo è quello con cui ho iniziato (l'ho semplificato per l'esempio per facilitare la lettura):

const Hero = ({titolo, sottotitolo, ctas}) => {
    ritorno(
         
             {title} </ title>
            <Subtitle> {sottotitolo} </ Subtitle>
            <ButtonRow>
               {ctas.map (cta => <LinkButton {... cta} />)}
            </ ButtonRow>
         </ LayoutWrapper>
    );
}</pre><p>L'esempio sopra ha preso tre oggetti di scena: titolo, sottotitoli e un array di cta (call to actions). Il titolo e i sottotitoli vengono inseriti nei loro componenti corrispondenti e quindi mappiamo sui ctas per ottenere una matrice di LinkButtons. È abbastanza semplice da seguire e funzionava benissimo.</p><p>Successivamente, ho riscontrato la necessità di avere una fila di LinkButton da qualche altra parte nella mia app. Fortunatamente, React rende facile riutilizzare il codice e ho rifattorizzato la fila di pulsanti dal mio componente Hero in modo da poterlo riutilizzare in entrambi i punti. Questo è quello che ho finito con:</p><pre>const ActionButtons = ({actions}) => {
    ritorno(
       <ButtonRow>
          {actions.map (action => <LinkButton {... action} />)}
       </ ButtonRow>
    );
}</pre><pre>const Hero = ({titolo, sottotitolo, ctas}) => {
    ritorno(
         <LayoutWrapper>
            <Title> {title} </ title>
            <Subtitle> {sottotitolo} </ Subtitle>
            <ActionButtons actions = {ctas} />
         </ LayoutWrapper>
    );
}</pre><p>Hai visto cos'è successo? All'inizio non l'ho nemmeno notato. È stato così facile riformattare solo la parte di cui avevo bisogno che non mi ero nemmeno accorto che avevo appena creato una situazione di perforazione dell'elica per me stesso. Stavo passando un puntello ctas nel componente Hero solo per girarmi e passarlo a un altro componente. Ciò avrebbe potuto causare in futuro alcuni grossi mal di testa e tutto ciò che stavo cercando di fare era approfittare del riutilizzo del codice.</p><p>Fortunatamente mi sono beccato e ho riformattato il codice in questo modo:</p><pre>const Hero = ({titolo, sottotitoli, figli}) => {
    ritorno(
         <LayoutWrapper>
            <Title> {title} </ title>
            <Subtitle> {sottotitolo} </ Subtitle>
            {bambini}
         </ LayoutWrapper>
    );
}</pre><pre><Titolo eroe = {titolo} sottotitolo = {sottotitolo}>
   <ActionButtons actions = {actions}
</ Eroe></pre><p>Come puoi vedere, non eseguo più il rendering esplicito del componente ActionButtons nel mio componente Hero. Sto semplicemente rendendo l'elica per bambini, che è disponibile per ogni componente di React. Questo modello riporta il controllo nelle mani degli sviluppatori per scegliere cosa e se renderizzare qualcosa lì. Passo quindi il componente ActionButtons da bambino al componente Hero. Questo mi permette di passare i dati direttamente al componente ActionButtons senza che il componente Hero abbia bisogno di sapere qualcosa sull'API del componente ActionButtons.</p><p>Il modello di passare componenti come bambini è chiamato "Composizione". È un modello potente che consente sia il disaccoppiamento dei componenti sia il riutilizzo del codice. Se vuoi saperne di più sulla composizione e su come usarla, ti consiglio di dare un'occhiata alla pagina iniziale di React su Composizione contro ereditarietà.</p><p>Il vantaggio che il mio codice ora ha è che poiché il componente ActionButtons migliora e cambia, il componente Hero non ha bisogno di sapere. Ha anche dato al componente Hero una maggiore flessibilità poiché non era più accoppiato al componente ActionButtons, quindi ora può rendere tutto ciò di cui potrei aver bisogno o niente. Il mio codice sarà molto più gestibile man mano che la mia base di codice cresce.</p></div><div class="neighbor-articles"><h4 class="ui header">Guarda anche</h4><a href="/question/how-to-pronounce-dirge/" title="come pronunciare dirge">come pronunciare dirge</a><a href="/question/nietzsche-how-to-pronounce/" title="nietzsche come si pronuncia">nietzsche come si pronuncia</a><a href="/question/how-to-become-a-millionaire-in-gta-5/" title="come diventare un milionario in gta 5">come diventare un milionario in gta 5</a><a href="/question/how-to-cover-a-book-with-scrapbook-paper/" title="come coprire un libro con carta per album">come coprire un libro con carta per album</a><a href="/question/how-to-get-shadowmere-back-after-he-dies/" title="come recuperare Shadowmere dopo la sua morte">come recuperare Shadowmere dopo la sua morte</a><a href="/question/how-to-bend-elements/" title="come piegare gli elementi">come piegare gli elementi</a><a href="/question/how-to-play-november-rain-on-piano/" title="come suonare la pioggia di novembre al pianoforte">come suonare la pioggia di novembre al pianoforte</a><a href="/question/how-to-say-ubiquitous/" title="come dire onnipresente">come dire onnipresente</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Guarda anche</h4><a href="/article/how-to-live-a-good-life-by-changing-the-way-you-think-9c5680/" title="Come vivere una bella vita cambiando il modo di pensare">Come vivere una bella vita cambiando il modo di pensare</a><a href="/article/how-to-add-your-exchange-wallets-to-coinance-901158/" title="Come aggiungere i tuoi portafogli Exchange a Coinance">Come aggiungere i tuoi portafogli Exchange a Coinance</a><a href="/article/how-to-use-grammarly-in-ulysses-4fe3d2/" title="Come usare Grammarly in Ulisse">Come usare Grammarly in Ulisse</a><a href="/article/how-to-create-button-animation-with-flare-in-flutter-part3-implement-animation-in-flutter-project-88e195/" title="Come creare l'animazione dei pulsanti con Flare in Flutter? Parte 3: implementare l'animazione nel progetto Flutter">Come creare l'animazione dei pulsanti con Flare in Flutter? Parte 3: implementare l'animazione nel progetto Flutter</a><a href="/article/how-to-manage-your-remote-software-development-team-effectively-8d1f5a/" title="Come gestire efficacemente il team di sviluppo software remoto">Come gestire efficacemente il team di sviluppo software remoto</a><a href="/article/how-to-get-free-diamonds-and-keys-at-choices-game-c5c11f/" title="Come ottenere Diamanti e chiavi gratuiti al gioco Scelte">Come ottenere Diamanti e chiavi gratuiti al gioco Scelte</a><a href="/article/how-to-build-an-infrared-camera-at-home-for-less-than-100-part-2-21371a/" title="Come costruire una telecamera a infrarossi a casa per meno di $ 100 (Parte 2)">Come costruire una telecamera a infrarossi a casa per meno di $ 100 (Parte 2)</a><a href="/article/how-to-create-serverless-images-using-aws-lambda-and-chartjs-37c674/" title="Come creare immagini senza server utilizzando AWS lambda e ChartJS">Come creare immagini senza server utilizzando AWS lambda e 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://hr.internautasporlapaz.org/article/how-to-avoid-prop-drilling-with-composition-5029cb/"><i class="hr 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://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>