Prop Drilling in React: Ulemper og alternativer

Å administrere data og bygge sterke, vedlikeholdbare applikasjoner er viktige ferdigheter for programvareutvikling. En vanlig måte å modularisere React-appene dine på er å bruke propellboring, som hjelper til med å sende data nedover komponenttreet.

Men etter hvert som prosjektene blir større, kan propellboring ha sine ulemper. Utforsk problemene rundt propellboring og finn ut hvilke alternativer som er tilgjengelige.

Forstå propellboring

Støtteboring er en teknikk som sender data ned i komponenttreet som rekvisitter, uavhengig av om mellomkomponenter trenger dataene eller ikke.

Drilling innebærer å overføre rekvisitter fra en forelder til dens underordnede komponenter, og lenger ned i hierarkiet. Hovedmålet er å gjøre det mulig for komponenter på lavere nivåer i treet å få tilgang til og bruke data som komponenter på høyere nivå gir.

Ulempene med propellboring

Mens propellboring løser problemet med å dele data, introduserer det flere ulemper som kan hindre kodevedlikehold og utviklingseffektivitet.

1. Økt kompleksitet

Etter hvert som en applikasjon vokser, blir propellboring vanskeligere å administrere. Dette kan føre til et komplekst nett av komponentavhengigheter, noe som gjør koden vanskelig å forstå og endre.

import ChildComponent from'./ChildComponent';
exportdefaultfunctionParentComponent = () => { 
const data = 'Prop drilling!'; 
return ( <div><ChildComponentdata={data} />div> );
};
import GrandChildComponent from'./GrandChildComponent'; 
exportdefaultfunctionChildComponent = ({ data }) => {
return ( <div><GrandChildComponentdata={data} />div> );
};
import GreatGrandChildComponent from'./GreatGrandChildComponent'; 
exportdefaultfunctionGrandChildComponent = ({ data }) => { 
return ( <div><GreatGrandChildComponentdata={data} />div> );
};
exportdefaultfunctionGreatGrandChildComponent = ({ data }) => { 
return ( <div><p>{data}p>div> );
};

Her flyttes data fra ParentComponent på toppnivå til GreatGrandChildComponent gjennom to mellomliggende komponenter.

Etter hvert som komponenthierarkiet vokser dypere, og flere komponenter er avhengige av rekvisitten, blir det vanskeligere å spore og administrere dataflyt.

2. Tett kobling

Dette skjer når komponenter er avhengige av hverandre via rekvisitter, noe som gjør det vanskelig å endre eller gjenbruke dem. Dette kan gjøre det vanskelig å gjøre endringer i én komponent uten å påvirke de andre.

import ChildComponentA from'./ChildComponentA'; 
import ChildComponentB from'./ChildComponentB';
exportdefaultfunctionParentComponent = () => { 
const sharedData = 'Shared data'; 
 return ( 





 </div>
 );
};
import GrandChildComponent from'./GrandChildComponent'; 
exportdefaultfunctionChildComponentA = ({ data }) => { 
return (



Component A</p>

 </div>
 );
};
import GrandChildComponent from'./GrandChildComponent'; 
exportdefaultfunctionChildComponentB = ({ data }) => { 
return (



Component B</p>

 </div>
 );
};
exportdefaultfunctionGrandChildComponent = ({ data }) => { 
return ( 


<p>{data}p> </div>
 );
};

Her mottar begge underordnede komponentene de samme dataene fra sin overordnede komponent og overfører dem til GrandChildComponent.

Hvis dataene oppdateres, må alle komponentene i hierarkiet også oppdateres, selv om noen ikke bruker dataene. Dette kan være vanskelig og tidkrevende, og det øker også risikoen for å introdusere feil.

3. Kodevedlikehold

Propellboring er et kodevedlikeholdsproblem fordi nye komponenter trenger tilgang til rekvisitter som sendes gjennom hierarkiet. Dette kan føre til feil hvis du trenger å endre mange komponenter, og inkonsekvenser hvis rekvisitter endres.

import ChildComponent from'./ChildComponent'; 
exportdefaultfunctionParentComponent = () => { 
const [count, setCount] = useState(0); 
const incrementCount = () => {
 setCount(count + 1);
 };
return ( 




 </div>
 );
};
import GrandChildComponent from'./GrandChildComponent'; 
exportdefaultfunctionChildComponent = ({ count, incrementCount }) => { 
return ( 



Increment</button> 

 </div>
 );
};
exportdefaultfunctionGrandChildComponent = ({ count }) => { 
return ( 


Count: {count}</p>
 </div>
 );
};

Her sender ParentComponent telleverdien som en prop til ChildComponent og deretter til GrandChildComponent.

Men hvis antallet endres eller hvis det er en ny regel for å sende ekstra rekvisitter, må du oppdatere hver komponent i hierarkiet som bruker rekvisitten. Denne prosessen er utsatt for feil, noe som gjør kodevedlikehold vanskelig og øker inkonsekvenser eller feil.

Utforsker alternativer til propellboring

Det er mange statlige styringsløsninger i React-økosystemet som du kan bruke for å overvinne ulempene med propellboring.

Reager kontekst

React Context er en funksjon som muliggjør deling av tilstand på tvers av komponenter uten bestått rekvisitter. Det gir en sentralisert butikk som komponenter kan få tilgang til med useContext-kroken. Dette kan forbedre ytelsen og gjøre det enklere å administrere tilstanden.

Redux

Redux er et statlig administrasjonsbibliotek som gir en enkelt global statlig butikk. Komponenter kan få tilgang til og oppdatere tilstanden gjennom handlinger og reduserere. Dette kan bidra til å holde koden din organisert og kan gjøre det enklere å feilsøke.

MobX

MobX er et statlig forvaltningsbibliotek som bruker observerbare data. Dette betyr at komponenter kan abonnere på endringer i staten og handle som svar. Biblioteket kan gjøre koden din mer reaktiv og kan forbedre ytelsen.

Jotai

Jotai er et statlig ledelsesbibliotek for React, som bruker en atomtilstandsmodell. Den lar deg lage tilstandsatomer som komponenter kan få tilgang til og oppdatere.

Med Jotai kan du redusere behovet for propellboring og oppnå en mer strømlinjeformet og effektiv tilnærming til statlig styring. Dens minimalistiske design og fokus på ytelse gjør den til et overbevisende valg for å administrere tilstanden i React-applikasjoner.

Støtteboring er en teknikk for å overføre data fra overordnede komponenter til underordnede komponenter. Det er effektivt for å dele data, men det har flere ulemper som kan gjøre kode vanskelig å vedlikeholde og utvikle.

For å overvinne disse ulempene kan du bruke alternativer som React Context, Redux og MobX. Disse løsningene gir en mer sentralisert måte å administrere data på, som kan gjøre koden mer vedlikeholdbar og skalerbar.