React props drilling pieeja, jeb īpašību urbšana…

Props drilling ir React pieeja, kurā dati un funkcijas tiek padotas no vienas komponentes uz citu caur starpniek komponentēm, paturot prātā to, ka React lieto vienvirziena datu plūsmu (one-way data flow).

Tātad tehniski props drilling varētu tulkot, kā “datu nodošana pa īpašībām” vai “datu caurplūde caur īpašībām”

To var izskaidrot ar piemēru. Iedomājieties, ka jums ir aplikācija ar daudziem komponentiem, kur katram no tiem ir jāpiekļūst noteiktiem datiem vai funkcijai, lai paveiktu savu darbu. Ja šīs informācijas saglabāšana būtu pieejama tikai tad, ja tā ir tieši pieejama no komponentes, tad tas varētu radīt sarežģītības.

Props drilling risina šo problēmu, ļaujot datiem un funkcijām būt pieejamām komponentēm, kas ir vairāku starpnieku komponenšu attālumā. Lai to panāktu, dati un funkcijas tiek padotas no vecāka komponentes uz bērnu komponentēm, līdz tie sasniedz galējo komponenti, kur tas ir nepieciešams.

Šī pieeja nodrošina vieglu un saprotamu veidu, kā padarīt informāciju pieejamu komponentēm, kur tā ir nepieciešama, vienlaicīgi nodrošinot vienvirziena datu plūsmu.

Piemērs React kodam, kas izmanto Props drilling pieeju:

// Vecāka komponente, kas satur bērnu komponenti un funkciju, lai padotu datus uz bērnu komponenti
function ParentComponent() {
const [name, setName] = useState('Jānis');

function handleNameChange(newName) {
setName(newName);
}

return (
<div>
<h1>Vecāka komponente</h1>
<ChildComponent name={name} onNameChange={handleNameChange} />
</div>
);
}

// Bērna komponente, kas attēlo vārdu un satur pogu, lai izsauktu vecāka komponentes funkciju
function ChildComponent(props) {
return (
<div>
<h2>Bērna komponente</h2>
<p>Vārds: {props.name}</p>
<button onClick={() => props.onNameChange('Mary')}>Mainīt vārdu</button>
</div>
);
}

Šajā piemērā ParentComponent satur bērnu komponenti ChildComponent, kurš attēlo vārdu, kas tiek nodots no vecāka komponentes, izmantojot name īpašību. Turklāt ChildComponent satur pogu, kas izsauc funkciju, kas tiek nodota no vecāka komponentes, izmantojot onNameChange īpašību.

Kad lietotājs spiež uz pogas, tas izsauc handleNameChange funkciju, kas ir definēta ParentComponent. Tad šī funkcija atjaunina name stāvokli, kas tiek nodots kā īpašība ChildComponent. Tas parādās ChildComponent attēloto vārdu izmaiņās.

Vēl kāds interesants piemērs…

Šeit ir ļoti vienkārša lietotne, kas koncentrējas uz rekvizītu procesu, kas iziet cauri vairākiem komponentiem.

Lūdzu, ņemiet vērā, ka mērķis nav izveidot lietotni, kas pastāvētu reālajā pasaulē. Šīs lietotnes mērķis ir izpētīt rekvizītu urbšanas (props drilling) praksi, lai jūs varētu koncentrēties uz to un izprast to atsevišķi.

Šeit ir lietotnes kods:

// Main komponente, kas atgriež Header komponenti ar nosūtītu ziņojumu
function Main(props) {
return <Header msg={props.msg} />;
};

// Header komponents, kas attēlo galvenes virsrakstu un apakškomponenti Wrapper
function Header(props) {
return (
<div style={{ border: "10px solid whitesmoke" }}>
<h1>Galvene šeit</h1>
<Wrapper msg={props.msg} />
</div>
);
};

// Wrapper komponents, kas ietver apakšējo komponenti Button
function Wrapper(props) {
return (
<div style={{ border: "10px solid lightgray" }}>
<h2>Wrapper    ir  šeit</h2>
<Button msg={props.msg} />
</div>
);
};

// Button komponents, kas attēlo pogu ar nodotu ziņojumu
function Button(props) {
return (
<div style={{ border: "20px solid orange" }}>
<h3>Šis ir Button komponents</h3>
<button onClick={() => alert(props.msg)}>Nospied mani!</button>
</div>
);
};

// App komponente, kas atgriež Main komponenti ar ziņojumu
function App() {
return (
<Main
msg="Es izgāju cauri galvenei, apgabalam un nonācu Button komponentē"
/>


);

};

export default App;

Koda iznākums:

Šis ekrānuzņēmums ilustrē katra komponenta robežas. Lietotāja saskarnē nevar atrast galveno komponentu, jo tas tikai renderē galvenes komponentu. Pēc tam komponents Header renderē komponentu Wrapper, bet komponents Wrapper renderē komponentu Button.

Ņemiet vērā, ka virkne, kas tika nodota tālāk un caur katru bērnu komponenta rekvizītu objektu, nekur nav atrodama. Tomēr tas parādīsies, noklikšķinot uz pogas “Nospied mani!” tiek attēlots “izlecošais paziņojums”

Brīdinājuma ziņojums uzrāda: “Es izgāju cauri galvenei, apgabalam un nonācu Button komponentē”.

Nobeiguma informācija:

Tomēr props drilling izmantot neiesaka…

Šis process var kļūt sarežģīts un neskaidrs lielākiem, vai augošiem projektiem, jo komponentiem var būt daudz slāņu, kas saņem “props”, pirms tiek nodoti bērniem. Turklāt, ja jums ir liels projektu apjoms ar daudziem komponentiem, kas izmanto šo veidni, tas var izraisīt problēmas ar kodu uzturēšanu, atjaunināšanu un izpratni.

Lai novērstu šīs problēmas, ir ieteicams izmantot alternatīvas tehnoloģijas un veidnes. Tehnoloģijas kas ļauj izveidot globālus stāvokļus, kas var tikt izmantoti visos komponentos, kas atrodas aplikācijā, neizmantojot “props drilling”. Tas ļauj kodam būt vieglāk renderējamam, uzturamākam un atjaunināmam, jo stāvokļi ir centralizēti un kontrolējami.

Bet par labākām alternatīvām Props drilling jau drīzumā, nākošajos manos rakstos…