React-Fiber

What
Why
WheN

ReconCilIation

+

Rendering

DOM

generate a tree of nodes

Native iOS View

Android View

Stack reconciler

Subtitle

https://facebook.github.io/react/contributing/codebase-overview.html

mountComponent()
    mountComponent()
        mountComponent()
            mountComponent()
                mountComponent()
                    mountComponent()

Deep updates block UI

Takes time

fiber

priority updates

Cooperative scheduling

      switch (nextPriorityLevel) {
        case SynchronousPriority$1:
        case TaskPriority$1:
          // Perform work immediately by switching the priority level
          // and continuing the loop.
          priorityLevel = nextPriorityLevel;
          break;
        case AnimationPriority:
          scheduleAnimationCallback(performAnimationWork);
          // Even though the next unit of work has animation priority, there
          // may still be deferred work left over as well. I think this is
          // only important for unit tests. In a real app, a deferred callback
          // would be scheduled during the next animation frame.
          scheduleDeferredCallback(performDeferredWork);
          break;
        case HighPriority:
        case LowPriority:
        case OffscreenPriority:
          scheduleDeferredCallback(performDeferredWork);
          break;
      }

requestIdleCallback

queues a function to be called during a browser's idle periods

How does it affect us

try it out

yarn add react@next react-dom@next react-native@next

React Native - /src/renderers/native/ReactNativeFeatureFlags.js

React DOM - /src/renderers/dom/shared/ReactDOMFeatureFlags.js

var ReactNativeFeatureFlags = {
  useFiber: false,
};

var ReactDOMFeatureFlags = {
  fiberAsyncScheduling: false,
  useCreateElement: true,
  useFiber: true,
};

Good read

• React Fiber現状確認 http://blog.koba04.com/post/2017/04/25/a-state-of-react-fiber/

• Lin Clark - A Cartoon Intro to Fiber - React Conf 2017 https://www.youtube.com/watch?v=ZCuYPiUIONs
• React Fiber Architecture https://github.com/acdlite/react-fiber-architecture