Dive Into

Kyle Mo

Become a better React Developer

React Fiber

Outline

What is React Fiber ?

React Reconciler

Overview of fiber reconciler algorithm

What Fiber brings for the future ?

Why Fiber use linked list to walk component tree?

What is React Fiber ?

發佈於 React 16，是 React 對內部資料結構的一個 refactor

嚴格來說，fiber 只是一個有許多 properties 的 React object

是 React 未來許多特性與功能實踐的基礎（ex. Concurrent Mode, Suspense Data Fetching）

{
    stateNode: new ClickCounter,
    type: ClickCounter,
    alternate: null,
    key: null,
    updateQueue: null,
    memoizedState: {count: 0},
    pendingProps: {},
    memoizedProps: {},
    tag: 1,
    effectTag: 0,
    nextEffect: null
}

Fiber 也代表 an unit of work for React to process

Animation

Responsiveness

將任務切分成 Chunks
將任務 Prioritize 分優先級
任務可以暫停，之後再繼續
可以重複使用之前的 work，也可以將不需要的 work 丟棄掉

Older Architecture Sample

Fiber Architecture Sample

What can it do ?

JSX -> React Element -> Fiber Node

What we know about fiber for now ?

There is tree of connected fibers

They represent react element and other things as well

Fibers are processed in two phase

Fiber = unit of work

- Render Phase

- Commit Phase

Synchronous

Asynchronous

React Reconciliation

All from Ken Chen's awesome slides

Before Fiber

After Fiber

Reconciler

Renderer

Scheduler

Reconciler

Renderer

- Reconciliation 是實作在 React Core 裡，不同 renderer 共用 Diff 演算法

- Renderer 代表 ReactDOM, React Native，各自負責渲染元件到畫面上

awesome react renderers

build a custom react renderer

Old Reconciler - Stack (< React 16)

- Work synchronous

- Work recursively, like call stack

- Had to work until the stack is empty

Fiber

Reconciler

New Reconciler -

Why Fiber use linked list to walk component tree?

node1

node2

node3

不熟悉 Linked List ? 看這裡

What does browser do in 1 frame ?

Render Phase

Commit 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

React walk the fiber tree and....

What is the problem ?

React is going to walk the entire tree of components synchronously and perform work for each component

It may run over 16 ms

Will cause frames to drop causing stuttering visual effects.

rIC, rAF To The Rescue

requestIdleCallback((deadline) => {
    //while we have time, perform work for a part of the components tree
    while ((deadline.timeRemaining() > 0 || deadline.didTimeout) && nextComponent) {
        nextComponent = performWork(nextComponent);
    }
});

rAF: high priority task (animation)

rIC: low priority task (network request)

React Scheduler

Well...we have big trouble....the work can not broke into smaller chunks

React just keeps iterating until it processed all components and the stack is empty.

synchronous

walk(a1);

function walk(instance) {
    doWork(instance);
    const children = instance.render();
    children.forEach(walk);
}

function doWork(o) {
    console.log(o.name);
}