Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Beobachten Sie, wie React den Fiber-Baum bei der Reconciliation mit Tiefensuche durchläuft.
Fiber ist Reacts internes Reconciliation-Modul, das in React 16 eingeführt wurde. Jede Komponente in Ihrer App hat einen entsprechenden Fiber-Knoten — ein JavaScript-Objekt, das den Komponententyp, seine Props, seinen Zustand, den zugehörigen DOM-Knoten sowie Zeiger auf übergeordnete, untergeordnete und benachbarte Fibers speichert. Diese verknüpfte Struktur erlaubt es React, die Arbeit über mehrere Frames hinweg anzuhalten, fortzusetzen und zu priorisieren.
Wenn React Ihren Komponentenbaum rendert, erstellt es für jedes Element einen Fiber-Knoten. Der Knoten speichert: Typ (Funktion/Klasse/String), Props, Zustand, Effect-Hooks und den Work-in-Progress-Zustand des vorherigen Renderings.
Anders als ein rekursiver Aufrufstapel (der nicht pausiert werden kann) sind Fibers als verkettete Liste verbunden: Jeder Knoten hat einen child-Zeiger (erstes Kind), einen sibling-Zeiger (nächstes Geschwister) und einen return-Zeiger (Elternteil). Dies ermöglicht React, den Baum iterativ zu durchlaufen.
React durchläuft den Fiber-Baum mit Tiefensuche. Es ruft 'beginWork' beim Abstieg auf (Elternteil → Kind) und 'completeWork' beim Aufstieg (Kind → Elternteil). Dieser Zwei-Phasen-Ansatz erlaubt React, eine Effect-Liste von unten nach oben aufzubauen.
React hält zwei Fiber-Bäume gleichzeitig: den 'current'-Baum (was auf dem Bildschirm angezeigt wird) und den 'work-in-progress'-Baum (was gerade gebaut wird). Jeder Fiber-Knoten hat einen 'alternate'-Zeiger, der sein Gegenstück im anderen Baum verknüpft.
Wenn die Commit-Phase abgeschlossen ist, tauscht React die beiden Bäume atomisch, indem es den 'current'-Zeiger der Wurzel auf den work-in-progress-Baum setzt. Der alte current-Baum wird zum neuen work-in-progress für das nächste Rendering.
Ein JS-Objekt, das eine Arbeitseinheit für eine Komponente darstellt. Enthält Typ, key, ref, Props, Zustand, Hooks-Liste, Effect-Tags und Baumzeiger.
Der Fiber-Baum, der während der Reconciliation aufgebaut wird. Für den Benutzer nicht sichtbar, bis die Commit-Phase abgeschlossen ist und er mit dem current-Baum getauscht wurde.
Die zwei Funktionen, die React beim Durchlaufen des Fiber-Baums aufruft. beginWork verarbeitet einen Knoten beim Abstieg; completeWork schließt ihn beim Aufstieg ab.
Eine Bitmaske auf einem Fiber-Knoten, die angibt, welche DOM-Arbeit anfällt: Placement (Einfügen), Update (Props aktualisieren), Deletion (Entfernen).
Jeder Fiber hat ein 'alternate'-Feld, das auf sein Gegenstück im anderen Baum zeigt (current ↔ work-in-progress). Ermöglicht doppelte Pufferung.
1// Simplified Fiber node structure (React internals)2{3 tag: FunctionComponent, // type of fiber4 type: MyComponent, // component function/class/string5 key: null,6 ref: null,7 pendingProps: { id: 1 },8 memoizedProps: { id: 1 }, // props from last render9 memoizedState: hooksList, // linked list of hooks1011 // Tree pointers12 return: parentFiber, // parent13 child: firstChildFiber, // first child14 sibling: nextSiblingFiber, // next sibling1516 // Double buffering17 alternate: workInProgressFiber,1819 // Work tracking20 flags: Update | Passive, // effect tags21 lanes: DefaultLane, // priority22}
Die Fiber-Architektur ist das, was Reacts Concurrent-Features ermöglicht. Da Arbeit als Datenstruktur (nicht als Aufrufstapel) dargestellt wird, kann React die Reconciliation an jedem Fiber-Knoten pausieren, die Kontrolle an den Browser für hochprioritäre Aufgaben wie Benutzereingaben zurückgeben und dort weitermachen, wo es aufgehört hat. Dies ist das Fundament von Suspense, Transitions und automatischem Batching.
Your dashboard app freezes for 200ms when a user opens a settings panel. React DevTools Profiler shows a long 'Render' phase but you can't identify which component is slow.
Without understanding Fiber, the profiler's flame graph (which shows fiber-by-fiber render times) looks like random colored bars. You don't know why some components are 're-rendered' when their props haven't changed.
Understanding that each bar in the Profiler IS a fiber node helps you trace the work loop: parent → child → sibling. You can identify which fiber's `beginWork` is slow, check its `memoizedProps` vs `pendingProps`, and apply React.memo or useMemo precisely.
Takeaway: The React DevTools Profiler is literally a fiber tree visualizer. Understanding fiber architecture transforms it from a confusing chart into a powerful debugging tool.
You have a drag-and-drop interface where moving an item should animate at 60fps, but data fetching from a heavy table re-render causes janky movement.
A single synchronous render blocks the main thread for 50ms+, causing the browser to skip animation frames during the data fetch re-render.
React Fiber's priority lanes system lets you wrap the heavy re-render in `startTransition()`, marking it as low-priority. The fiber work loop can now pause the heavy render, yield to the browser for animation frames, and resume later — all because fibers are interruptible units of work.
Takeaway: Fiber architecture is the reason `useTransition` and `useDeferredValue` exist. These APIs wouldn't be possible without interruptible, priority-based rendering.