Prop drilling yra duomenų perdavimas per daugybę tarpinių komponentų, kurie jų patys nenaudoja, tik tam, kad pasiektų giliai įdėtą komponentą, kuris jų reikalingas. Tai nuobodu ir komponentus glaudžiai susieja su duomenimis, kurie jiem nesvarbu.
() {
[user] = ({ : });
;
}
() {
;
}
() {
;
}
() {
;
}
Layout, Header ir Nav visi turi priimti ir perduoti user nors jie jo nenaudoja — triukšmingi, trapūs (pervardinti prop ir redaguoti kiekvieną sluoksnį), ir susieti nesusijusius komponentus.
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 leidžia bet kuriam palikuoniui tiesiogiai perskaityti reikšmę, aplenkiant tarpinius sluoksnius.
✓ 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 yra dažna problema, žyminti, kad duomenys reikalingi plačiai — jos atpažinimas rodo, kada pasiekti Context, būsenos bibliotekos ar sudėties.
Jo vengimas (kai jis tikrai giliai) komponentus laiko nesusietu ir lengvai prižiūrimais.
Tačiau sprendimas yra svarbus: negilūs drilling yra priimtini ir paprastesni nei per ankstyvus abstraktūs; tikslas yra pašalinti gilus, pasikartojančius perdavimus, o ne visą prop perdavimą.