DOM
generate a tree of nodes
Native iOS View
Android View
mountComponent()
mountComponent()
mountComponent()
mountComponent()
mountComponent()
mountComponent()
Deep updates block UI
Takes time
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
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,
};
React Fiber現状確認 http://blog.koba04.com/post/2017/04/25/a-state-of-react-fiber/