Prop Drilling in React: trūkumi un alternatīvas

Datu pārvaldība un spēcīgu, uzturējamu lietojumprogrammu izveide ir būtiskas programmatūras izstrādes prasmes. Izplatīts React lietotņu modularizācijas veids ir izmantot balstu urbšanu, kas palīdz nodot datus komponentu kokā.

Taču, projektiem kļūstot lielākiem, urbšanai ar balstiem var būt trūkumi. Izpētiet problēmas, kas saistītas ar balsta urbšanu, un uzziniet, kādas alternatīvas ir pieejamas.

Izpratne par balsta urbšanu

Balstu urbšana ir paņēmiens, kas datus nosūta komponentu kokā kā balstus neatkarīgi no tā, vai starpkomponentiem ir nepieciešami dati.

Urbšana ietver rekvizītu nodošanu no vecākām tās atvasinātajām sastāvdaļām un tālāk pa hierarhiju. Galvenais mērķis ir ļaut komponentiem zemākos koka līmeņos piekļūt datiem, ko nodrošina augstāka līmeņa komponenti, un izmantot tos.

Prop urbšanas negatīvās puses

Lai gan atbalsta urbšana atrisina datu koplietošanas problēmu, tā rada vairākus trūkumus, kas var kavēt koda apkopi un izstrādes efektivitāti.

1. Paaugstināta sarežģītība

Pieaugot lietojumam, balsta urbšana kļūst grūtāk vadāma. Tas var radīt sarežģītu komponentu atkarību tīklu, padarot kodu grūti saprotamu un maināmu.

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> );
};

Šeit dati no augstākā līmeņa ParentComponent tiek pārvietoti uz GreatGrandChildComponent, izmantojot divus starpposma komponentus.

Tā kā komponentu hierarhija kļūst arvien dziļāka un vairāk komponentu paļaujas uz balstu, kļūst grūtāk izsekot un pārvaldīt datu plūsmu.

2. Stingrs savienojums

Tas notiek, ja komponenti ir atkarīgi viens no otra, izmantojot balstus, apgrūtinot to nomaiņu vai atkārtotu izmantošanu. Tas var apgrūtināt izmaiņu veikšanu vienā komponentā, neietekmējot pārējos.

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>
 );
};

Šeit abi pakārtotie komponenti saņem tos pašus datus no sava vecākkomponenta un nodod tos GrandChildComponent.

Ja dati tiek atjaunināti, ir jāatjaunina arī visi hierarhijas komponenti, pat ja daži no tiem neizmanto datus. Tas var būt sarežģīti un laikietilpīgi, kā arī palielina kļūdu ieviešanas risku.

3. Koda uzturēšana

Balstu urbšana ir koda uzturēšanas problēma, jo jauniem komponentiem ir nepieciešama piekļuve balstiem, kas iziet cauri hierarhijai. Tas var izraisīt kļūdas, ja jums ir jāmaina daudzi komponenti, un neatbilstības, ja mainās rekvizīti.

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>
 );
};

Šeit ParentComponent nodod skaitīšanas vērtību kā atbalstu ChildComponent un pēc tam GrandChildComponent.

Taču, ja mainās skaits vai ja ir jauns noteikums papildu rekvizītu nodošanai, jums būs jāatjaunina katrs hierarhijas komponents, kurā tiek izmantots rekvizīts. Šis process ir pakļauts kļūdām, apgrūtinot koda apkopi un palielinot neatbilstības vai kļūdas.

Alternatīvu izpēte balsta urbšanai

React ekosistēmā ir daudz valsts pārvaldības risinājumu, ko varat izmantot, lai pārvarētu balsta urbšanas trūkumus.

Reaģēšanas konteksts

React Context ir funkcija, kas ļauj koplietot stāvokli starp komponentiem, neizmantojot rekvizītus. Tas nodrošina centralizētu veikalu, kuram var piekļūt komponenti ar useContext āķi. Tas var uzlabot veiktspēju un atvieglot stāvokļa pārvaldību.

Redux

Redux ir štata pārvaldības bibliotēka, kas nodrošina vienotu globālu štata veikalu. Komponenti var piekļūt stāvoklim un atjaunināt to, izmantojot darbības un reduktorus. Tas var palīdzēt sakārtot kodu un atvieglot atkļūdošanu.

MobX

MobX ir valsts pārvaldības bibliotēka, kas izmanto novērojamos datus. Tas nozīmē, ka komponenti var abonēt stāvokļa izmaiņas un reaģēt uz tiem. Bibliotēka var padarīt jūsu kodu reaktīvāku un uzlabot veiktspēju.

Jotai

Jotai ir valsts pārvaldes bibliotēka React, kas izmanto atomu stāvokļa modeli. Tas ļauj jums izveidot stāvokļa atomus, kuriem komponenti var piekļūt un atjaunināt.

Izmantojot Jotai, jūs varat samazināt vajadzību pēc balsta urbšanas un panākt racionālāku un efektīvāku valsts pārvaldības pieeju. Tā minimālistiskais dizains un fokuss uz veiktspēju padara to par pārliecinošu izvēli stāvokļa pārvaldībai React lietojumprogrammās.

Prop urbšana ir paņēmiens datu pārsūtīšanai no vecākkomponentiem uz pakārtotajiem komponentiem. Tas ir efektīvs datu koplietošanai, taču tam ir vairāki trūkumi, kas var apgrūtināt koda uzturēšanu un attīstību.

Lai novērstu šos trūkumus, varat izmantot tādas alternatīvas kā React Context, Redux un MobX. Šie risinājumi nodrošina centralizētāku datu pārvaldības veidu, kas var padarīt kodu labāk uzturējamu un mērogojamu.