Prop Drilling in React: trūkumai ir alternatyvos

Duomenų valdymas ir stiprių, prižiūrimų programų kūrimas yra gyvybiškai svarbūs programinės įrangos kūrimo įgūdžiai. Įprastas „React“ programų moduliavimo būdas yra naudoti atramos gręžimą, kuris padeda perduoti duomenis į komponentų medį.

Tačiau, kai projektai tampa didesni, atramos gręžimas gali turėti trūkumų. Ištirkite problemas, susijusias su atramos gręžimu, ir sužinokite, kokių alternatyvų yra.

Supratimas apie atramų gręžimą

Atramų gręžimas yra metodas, kuris perduoda duomenis į komponentų medį kaip rekvizitus, neatsižvelgiant į tai, ar tarpiniams komponentams reikia duomenų, ar ne.

Gręžimas apima rekvizitų perdavimą iš tėvų antriniams komponentams ir toliau hierarchijoje. Pagrindinis tikslas yra leisti komponentams žemesniuose medžio lygiuose pasiekti ir naudoti duomenis, kuriuos teikia aukštesnio lygio komponentai.

Prop gręžimo trūkumai

Nors rekvizito gręžimas išsprendžia dalijimosi duomenimis problemą, jis turi keletą trūkumų, kurie gali trukdyti prižiūrėti kodą ir trukdyti kūrimo efektyvumui.

1. Padidėjęs sudėtingumas

Augant pritaikymui, sraigtasparnį gręžti tampa sunkiau valdyti. Tai gali sukelti sudėtingą komponentų priklausomybių tinklą, todėl kodą sunku suprasti ir pakeisti.

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

Čia duomenys iš aukščiausio lygio ParentComponent per du tarpinius komponentus perkeliami į GreatGrandChildComponent.

Kadangi komponentų hierarchija vis gilėja ir daugiau komponentų priklauso nuo rekvizito, darosi sunkiau atsekti ir valdyti duomenų srautą.

2. Tvirta jungtis

Taip atsitinka, kai komponentai priklauso vienas nuo kito per rekvizitus, todėl juos sunku pakeisti ar pakartotinai naudoti. Dėl to gali būti sunku atlikti vieno komponento pakeitimus, nepažeidžiant kitų.

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

Čia abu antriniai komponentai gauna tuos pačius duomenis iš pirminio komponento ir perduoda juos GrandChildComponent.

Jei duomenys atnaujinami, reikia atnaujinti ir visus hierarchijos komponentus, net jei kai kurie jų nenaudoja. Tai gali būti sudėtinga ir atimti daug laiko, be to, padidėja klaidų atsiradimo rizika.

3. Kodo priežiūra

Atramos gręžimas yra kodo priežiūros problema, nes naujiems komponentams reikia prieigos prie rekvizitų, perduodamų per hierarchiją. Tai gali sukelti klaidų, jei reikia modifikuoti daugelį komponentų, ir neatitikimų, jei keičiasi rekvizitai.

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

Čia „ParentComponent“ perduoda skaičiavimo reikšmę kaip rekvizitą „ChildComponent“, o paskui į „GrandChildComponent“.

Tačiau pasikeitus skaičiui arba atsiradus naujai taisyklėms perduoti papildomus rekvizitus, turėsite atnaujinti kiekvieną hierarchijos komponentą, kuris naudoja rekvizitus. Šiame procese dažnai pasitaiko klaidų, todėl sunku prižiūrėti kodą ir daugėja neatitikimų ar klaidų.

Atraminio gręžimo alternatyvų tyrinėjimas

React ekosistemoje yra daug valstybės valdymo sprendimų, kuriuos galite naudoti norėdami įveikti atramos gręžimo trūkumus.

Reagavimo kontekstas

„React Context“ yra funkcija, leidžianti dalytis būsenomis tarp komponentų nepraleidžiant rekvizitų. Tai suteikia centralizuotą parduotuvę, kurią gali pasiekti komponentai su useContext kabliu. Tai gali pagerinti našumą ir palengvinti būsenos valdymą.

Redux

Redux yra valstybės valdymo biblioteka, teikianti vieną pasaulinę būsenų saugyklą. Komponentai gali pasiekti ir atnaujinti būseną naudodami veiksmus ir reduktorius. Tai gali padėti sutvarkyti kodą ir palengvinti derinimą.

MobX

MobX yra valstybės valdymo biblioteka, kuri naudoja stebimus duomenis. Tai reiškia, kad komponentai gali prisijungti prie būsenos pokyčių ir veikti reaguodami. Biblioteka gali padaryti jūsų kodą aktyvesnį ir pagerinti našumą.

Jotai

Jotai yra valstybės valdymo biblioteka, skirta React, kuris naudoja atominės būsenos modelį. Tai leidžia jums sukurti būsenos atomus, kuriuos komponentai gali pasiekti ir atnaujinti.

Naudodami „Jotai“ galite sumažinti atramos gręžimo poreikį ir pasiekti racionalesnį bei efektyvesnį valstybės valdymo metodą. Dėl minimalistinio dizaino ir dėmesio našumui jis yra patrauklus pasirinkimas valdant būseną React programose.

Prop gręžimas yra duomenų perdavimo iš pirminių komponentų į antrinius komponentus metodas. Jis veiksmingas dalijantis duomenimis, tačiau turi keletą trūkumų, dėl kurių kodą gali būti sunku prižiūrėti ir tobulinti.

Norėdami pašalinti šiuos trūkumus, galite naudoti tokias alternatyvas kaip „React Context“, „Redux“ ir „MobX“. Šie sprendimai suteikia labiau centralizuotą duomenų valdymo būdą, todėl kodą galima lengviau prižiūrėti ir keisti.