Skip to main content

Fiber

  • Chunk render
  • Different priority tasks

JSX -> React Element -> Fiber Node

Reconciliation​

compare the vdom diff, then only render the diff part into the real dom.

  • if two dom are diffrent, render all the children
  • recursive based on children

from tree to another tree. time complexity: O(n)

Render Phase​

  • Retrieves the children from the component
  • Updates state and props
  • Calls lifecycle hooks
  • Compares them to the previous children and figures out the DOM updates that need to be performed

High priority task -> requestAnimationFrame, low prioity task -> requestIdleCallback

Old Reconciler​

  • Work synchronous
  • Work recursively, like call stack
  • Had to work until stack is empty

Fiber Reconciler​

  • From stack -> linked list
  • dfs, sequence child, self, sibling
  • workLoop (while loop, not call stack)

Fiber node attr, (children, sibling)

commit phase​

Update the the real dom with side effect list, can't not be interrupted.

ref