Prop Drilling в React: недостатки и альтернативы

Управление данными и создание надежных, удобных в сопровождении приложений являются жизненно важными навыками разработки программного обеспечения. Обычный способ модульности ваших приложений React — использовать сверление реквизита, которое помогает передавать данные вниз по дереву компонентов.

Но по мере того, как проекты становятся больше, бурение с опорой может иметь свои недостатки. Исследуйте проблемы, связанные с бурением винтов, и узнайте, какие существуют альтернативы.

Понимание винтового бурения

Детализация реквизита — это метод, при котором данные передаются вниз по дереву компонентов в виде реквизита, независимо от того, нужны ли данные промежуточным компонентам или нет.

Детализация включает в себя передачу свойств от родителя к его дочерним компонентам и далее вниз по иерархии. Основная цель состоит в том, чтобы позволить компонентам на более низких уровнях дерева получать доступ и использовать данные, предоставляемые компонентами более высокого уровня.

Недостатки винтового бурения

В то время как детализация реквизита решает проблему совместного использования данных, она вносит несколько недостатков, которые могут препятствовать сопровождению кода и эффективности разработки.

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. Это может повысить производительность и упростить управление состоянием.

Редукс

Редукс — это библиотека управления состоянием, предоставляющая единое глобальное хранилище состояний. Компоненты могут получать доступ к состоянию и обновлять его с помощью действий и редюсеров. Это поможет упорядочить код и упростить отладку.

МобХ

МобХ — это библиотека управления состоянием, которая использует наблюдаемые данные. Это означает, что компоненты могут подписываться на изменения состояния и действовать в ответ. Библиотека может сделать ваш код более реактивным и повысить производительность.

Джотай

Jotai — библиотека управления состоянием для React., который использует модель атомарного состояния. Это позволяет вам создавать атомы состояния, к которым компоненты могут обращаться и обновлять.

С Jotai вы можете сократить потребность в бурении опор и добиться более рационального и эффективного подхода к управлению состоянием. Его минималистичный дизайн и ориентация на производительность делают его привлекательным выбором для управления состоянием в приложениях React.

Сверление Prop — это метод передачи данных от родительских компонентов к дочерним компонентам. Он эффективен для обмена данными, но имеет несколько недостатков, которые могут затруднить поддержку и разработку кода.

Чтобы преодолеть эти недостатки, вы можете использовать такие альтернативы, как React Context, Redux и MobX. Эти решения обеспечивают более централизованный способ управления данными, что может сделать код более удобным для сопровождения и масштабируемым.