När två komponenter behöver dela samma state flyttar du ("lyfter") det state uppåt till deras närmaste gemensamma ancestor och skickar det nedåt via props, så det finns en enda sanningskälla.
jsx
() {
[query, setQuery] = ();
(
);
}
När två komponenter behöver dela samma state flyttar du ("lyfter") det state uppåt till deras närmaste gemensamma ancestor och skickar det nedåt via props, så det finns en enda sanningskälla.
() {
[query, setQuery] = ();
(
);
}
Om varje child behöll sin egen query skulle de hamna ur synk. Att lyfta det betyder att input och resultat alltid är överens.
Att lyfta state högt kan tvinga dig att skicka props genom många mellanliggande komponenter som inte använder dem:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children så data stannar där det används istället för att tvingas genom.Vägledande princip: lyfta state bara så högt som det behöver — inte högre. Överlyftning orsakar omfattande re-renders och prop drilling; underlyftning orsakar ur-synk-dubbletter.