Подпорно пробиване в React: недостатъци и алтернативи

Управлението на данни и изграждането на силни, поддържаеми приложения са жизненоважни умения за разработка на софтуер. Често срещан начин за модулиране на вашите React приложения е използването на пробивно пробиване, което помага за предаване на данни надолу по дървото на компонентите.

Но тъй като проектите стават по-големи, пробивното сондиране може да има своите недостатъци. Проучете проблемите, свързани с пробивното сондиране и разберете какви алтернативи са налични.

Разбиране на подпорното сондиране

Prop drilling е техника, която предава данни надолу по дървото на компонентите като подпори, независимо дали междинните компоненти се нуждаят от данните или не.

Пробиването включва предаване на подпори от родителски към неговите дъщерни компоненти и по-нататък в йерархията. Основната цел е да се даде възможност на компонентите на по-ниските нива на дървото да имат достъп и да използват данни, които компонентите на по-високо ниво предоставят.

Недостатъците на подпорното сондиране

Въпреки че пробивното пробиване решава проблема със споделянето на данни, то въвежда няколко недостатъка, които могат да възпрепятстват поддръжката на кода и ефективността на разработката.

1. Повишена сложност

С разрастването на едно приложение управлението на пробивните сондажи става все по-трудно. Това може да доведе до сложна мрежа от зависимости на компоненти, което прави кода труден за разбиране и промяна.

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

Тук данните от ParentComponent от най-високо ниво се преместват към GreatGrandChildComponent чрез два междинни компонента.

Тъй като йерархията на компонентите се задълбочава и повече компоненти разчитат на опората, става по-трудно да се проследи и управлява потокът от данни.

2. Плътно свързване

Това се случва, когато компонентите зависят един от друг чрез подпори, което затруднява промяната или повторното им използване. Това може да затрудни извършването на промени в един компонент, без да се засягат останалите.

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

Тук и двата дъщерни компонента получават едни и същи данни от техния родителски компонент и ги предават на GrandChildComponent.

Ако данните се актуализират, всички компоненти в йерархията също се нуждаят от актуализиране, дори ако някои не използват данните. Това може да бъде трудно и отнема много време, а също така увеличава риска от въвеждане на грешки.

3. Поддържаемост на кода

Пробирането на подпори е проблем с поддръжката на кода, тъй като новите компоненти се нуждаят от достъп до подпори, преминали през йерархията. Това може да доведе до грешки, ако трябва да модифицирате много компоненти, и несъответствия, ако подпорите се променят.

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

Тук ParentComponent предава стойността на броя като проп на ChildComponent и след това на GrandChildComponent.

Но ако броят се промени или ако има ново правило за предаване на допълнителни реквизити, ще трябва да актуализирате всеки компонент в йерархията, която използва реквизитите. Този процес е податлив на грешки, което затруднява поддръжката на кода и увеличава несъответствията или грешките.

Проучване на алтернативи на сондирането с опорни опори

Има много решения за управление на състоянието в екосистемата React, които можете да използвате, за да преодолеете недостатъците на пробивното сондиране.

Реагирайте контекст

React Context е функция, която позволява споделянето на състояние между компоненти без предаване на реквизити. Той осигурява централизирано хранилище, до което компонентите имат достъп с куката useContext. Това може да подобри производителността и да улесни управлението на състоянието.

Redux

Redux е библиотека за управление на състояние, която предоставя единно глобално хранилище на състояние. Компонентите имат достъп и актуализират състоянието чрез действия и редуктори. Това може да помогне да поддържате кода си организиран и може да улесни отстраняването на грешки.

MobX

MobX е библиотека за управление на състоянието, която използва наблюдаеми данни. Това означава, че компонентите могат да се абонират за промени в състоянието и да действат в отговор. Библиотеката може да направи вашия код по-реактивен и може да подобри производителността.

Джотай

Jotai е библиотека за управление на състояние за React, който използва модел на атомно състояние. Тя ви позволява да създавате атоми на състоянието, до които компонентите имат достъп и да ги актуализират.

С Jotai можете да намалите нуждата от пробивни сондажи и да постигнете по-рационализиран и ефективен подход за управление на състоянието. Минималистичният му дизайн и фокусът върху производителността го правят завладяващ избор за управление на състоянието в React приложения.

Prop drilling е техника за предаване на данни от родителски компоненти към дъщерни компоненти. Той е ефективен за споделяне на данни, но има няколко недостатъка, които могат да направят кода труден за поддържане и разработване.

За да преодолеете тези недостатъци, можете да използвате алтернативи като React Context, Redux и MobX. Тези решения предоставят по-централизиран начин за управление на данни, което може да направи кода по-поддържан и мащабируем.