Prop Drilling w React: wady i alternatywy

Zarządzanie danymi i tworzenie silnych, łatwych w utrzymaniu aplikacji to kluczowe umiejętności programistyczne. Częstym sposobem modularyzacji aplikacji React jest użycie prop drążenia, które pomaga przekazywać dane w dół drzewa komponentów.

Ale w miarę jak projekty stają się większe, wiercenie podporowe może mieć swoje wady. Poznaj problemy związane z wierceniem podporowym i dowiedz się, jakie są dostępne alternatywy.

Zrozumienie wiercenia podporowego

Wiercenie podporowe to technika, która przekazuje dane w dół drzewa komponentów jako podpory, niezależnie od tego, czy komponenty pośrednie potrzebują danych, czy nie.

Drążenie polega na przekazywaniu rekwizytów od elementu nadrzędnego do jego komponentów podrzędnych i niżej w hierarchii. Głównym celem jest umożliwienie komponentom na niższych poziomach drzewa dostępu i korzystania z danych dostarczanych przez komponenty wyższego poziomu.

Wady wiercenia podporowego

Wiercenie podporowe rozwiązuje problem udostępniania danych, ale wprowadza kilka wad, które mogą utrudniać konserwację kodu i wydajność programowania.

1. Zwiększona złożoność

W miarę rozwoju aplikacji zarządzanie wierceniem podporowym staje się coraz trudniejsze. Może to prowadzić do powstania złożonej sieci zależności między komponentami, co utrudnia zrozumienie i zmianę kodu.

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

Tutaj dane z ParentComponent najwyższego poziomu są przenoszone do GreatGrandChildComponent przez dwa pośrednie komponenty.

W miarę jak hierarchia komponentów staje się głębsza, a coraz więcej komponentów polega na rekwizytach, śledzenie przepływu danych i zarządzanie nim staje się coraz trudniejsze.

2. Mocne sprzęgło

Dzieje się tak, gdy komponenty są od siebie zależne za pośrednictwem rekwizytów, co utrudnia ich zmianę lub ponowne użycie. Może to utrudnić wprowadzanie zmian w jednym komponencie bez wpływu na inne.

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

Tutaj oba komponenty potomne otrzymują te same dane od swojego komponentu nadrzędnego i przekazują je do GrandChildComponent.

Jeśli dane zostaną zaktualizowane, wszystkie składniki w hierarchii również wymagają aktualizacji, nawet jeśli niektóre z nich nie korzystają z danych. Może to być trudne i czasochłonne, a także zwiększa ryzyko wprowadzenia błędów.

3. Łatwość utrzymania kodu

Wiercenie rekwizytów jest problemem konserwacji kodu, ponieważ nowe komponenty wymagają dostępu do rekwizytów przekazywanych przez hierarchię. Może to prowadzić do błędów, jeśli trzeba zmodyfikować wiele komponentów, i niespójności, jeśli zmienią się rekwizyty.

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

Tutaj ParentComponent przekazuje wartość licznika jako właściwość do ChildComponent, a następnie do GrandChildComponent.

Ale jeśli liczba się zmieni lub jeśli pojawi się nowa reguła przekazywania dodatkowych rekwizytów, będziesz musiał zaktualizować każdy komponent w hierarchii, który korzysta z rekwizytu. Ten proces jest podatny na błędy, co utrudnia utrzymanie kodu i zwiększa liczbę niespójności lub błędów.

Badanie alternatyw dla wiercenia podporowego

W ekosystemie React istnieje wiele rozwiązań do zarządzania stanem, których można użyć do przezwyciężenia wad wiercenia podporowego.

Kontekst reakcji

Kontekst reagowania to funkcja, która umożliwia współdzielenie stanu między komponentami bez przekazywania rekwizytów. Zapewnia scentralizowany magazyn, do którego mają dostęp komponenty za pomocą haka useContext. Może to poprawić wydajność i ułatwić zarządzanie stanem.

Redux

Redux to biblioteka zarządzania stanem, która zapewnia jeden globalny magazyn stanu. Komponenty mogą uzyskiwać dostęp do stanu i aktualizować go za pomocą akcji i reduktorów. Może to pomóc w utrzymaniu porządku w kodzie i ułatwić debugowanie.

MobX

MobX to biblioteka zarządzania stanem, która wykorzystuje obserwowalne dane. Oznacza to, że komponenty mogą subskrybować zmiany stanu i działać w odpowiedzi. Biblioteka może sprawić, że Twój kod będzie bardziej reaktywny i może poprawić wydajność.

Jotaj

Jotai to biblioteka zarządzania stanem dla React, który wykorzystuje atomowy model stanu. Pozwala tworzyć atomy stanu, do których komponenty mogą uzyskiwać dostęp i które mogą aktualizować.

Dzięki Jotai możesz zmniejszyć potrzebę wiercenia podpór i osiągnąć bardziej usprawnione i wydajne podejście do zarządzania stanem. Jego minimalistyczny design i skupienie się na wydajności sprawiają, że jest to przekonujący wybór do zarządzania stanem w aplikacjach React.

Wiercenie podporowe to technika przekazywania danych z komponentów nadrzędnych do komponentów podrzędnych. Jest skuteczny w udostępnianiu danych, ale ma kilka wad, które mogą utrudniać utrzymanie i rozwijanie kodu.

Aby przezwyciężyć te wady, możesz użyć alternatyw, takich jak React Context, Redux i MobX. Rozwiązania te zapewniają bardziej scentralizowany sposób zarządzania danymi, dzięki czemu kod jest łatwiejszy w utrzymaniu i skalowalny.