Prop drilling არის მონაცემების გაპередაჩა მრავალი შუამავალი კომპონენტის საშუალებით, რომლებიც თავად მათ არ იყენებენ, მხოლოდ იმისთვის რომ მივაწვდეთ ღრმად ჩალაგებულ კომპონენტამდე, რომელიც მათ საჭიროებს. ეს მოწყენებული და კომპონენტებს მტკიცედ აკავშირებს მონაცემებს, რომელთაც არ აკმარებთ.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header და Nav ყველამ უნდა მიიღოს და გაიტანოს user მიუხედავად იმისა, რომ ისინი მას არ იყენებენ — ხმაური, მტკიცე (გადარქვა prop და რედაქტირება ყველა ფენა), და დაკავშირებული კომპონენტები.
const UserContext = createContext(null);
function App() {
const [user] = useState({ name: "Ann" });
return (
<UserContext.Provider value={user}> {/* provide once at the top */}
<Layout /> {/* no user prop needed anywhere */}
</UserContext.Provider>
);
}
function Avatar() {
const user = useContext(UserContext); // consume directly, skip the middle
return <img alt={user.name} />;
}
Context საშუალებას აძლევს ნებისმიერ მოწაფეს პირდაპირ წაიკითხოს მნიშვნელობა, შუამავალი ფენების გვერდიდან.
✓ Context API → for app-wide/subtree data (theme, user, locale)
✓ State libraries → Zustand/Redux/Jotai — components subscribe to the store directly
✓ Component composition → pass JSX as children instead of data through props
// composition: let the parent compose the tree, passing the leaf directly
<Layout><Nav><Avatar user={user} /></Nav></Layout>
A little prop drilling (1–2 levels) is FINE and often clearer than adding Context.
Reach for Context/stores when drilling becomes deep or widespread.
Prop drilling არის საერთო პრობლემა, რომელიც აჩვენებს, რომ მონაცემები ფართოდ საჭიროა — მისი აღიარება გეუბნებათ, როდის უნდა მიმართოთ Context-ს, state ბიბლიოთეკას ან composition-ს.
მისი თავიდან აცილება (როდესაც ის ნაკლებად ღრმაა) კომპონენტებს განცალკევებული და ხელოვნურად შესაძლო ინახავს.
მაგრამ განჭვრიტება მნიშვნელოვანია: მარტივი drilling მისაღებია და უფრო მარტივი ვიდრე ნაადრევი აბსტრაქცია; მიზანი არის ღრმა, განმეორებითი გადაგზავნის გამოვლენა, არა ყველა prop-ის გავლა.