React · Senior · Frage 60 von 75
Warum rendert <ExpensiveTree /> hier nicht neu, wenn sich der Zustand von ColorPicker ändert?
function ColorPicker({ children }) {
const [color, setColor] = useState("red");
return <div style={{ color }}>{children}</div>;
}
// <ColorPicker><ExpensiveTree /></ColorPicker>- 1React rendert nichts neu, was über
childrenübergeben wird - 2
childrenstammt von der Elternkomponente, ist also dasselbe Objekt - 3
styleam Wrapper-Element verhindert alle Re-Renderings der Kinder
Antwort zeigen
Richtige Antwort: children stammt von der Elternkomponente, ist also dasselbe Objekt
Erklärung
JSX als children zu übergeben („Inhalt nach oben heben“) ist eine Optimierung ohne memo: Nur die Elternkomponente, die das Element erzeugt hat, entscheidet, wann es sich ändert.