Når to komponenter må dele samme state, flytter du ("lifter") denne staten opp til deres nærmeste felles forfar og sender den ned via props, slik at det finnes en enkel kilde til sannhet.
jsx
() {
[query, setQuery] = ();
(
);
}
Når to komponenter må dele samme state, flytter du ("lifter") denne staten opp til deres nærmeste felles forfar og sender den ned via props, slik at det finnes en enkel kilde til sannhet.
() {
[query, setQuery] = ();
(
);
}
Hvis hver child beholdt sin egen query, ville de gå ut av synk. Å løfte det betyr at input og resultatene alltid er enige.
Å løfte state høyt kan tvinge deg til å sende props gjennom mange mellomliggende komponenter som ikke bruker dem:
<App user={user}>
<Layout user={user}> {/* just forwarding */}
<Sidebar user={user}> {/* just forwarding */}
<Avatar user={user} /> {/* finally used here */}
children slik at dataene blir der de brukes i stedet for å bli ledet gjennom.Veiledende prinsipp: løft state bare så høyt som det må – ikke høyere. Overløfting forårsaker brede re-renders og prop drilling; underløfting forårsaker out-of-sync duplikater.
Et bibliotek av IT-intervjuspørsmål med detaljerte svar — fra Junior til Senior.
Doner