Following the 0.3-Stable (v0.3), the 16.8.6 (V16.8.6) version, which was labeled on March 28, 2019, will be read here. So next, I will interpret the source code of this version from several aspects. (Directory contains V0.3)

  1. React render HTML elements
  2. React source code learning (b) : HTML child render
  3. React source code learn (3) : CSS style and DOM properties
  4. React source learning (4) : transaction mechanism
  5. React source code learning (5) : event mechanism
  6. React source code learning (6) : Component rendering
  7. React source code learning (7) : life cycle
  8. React source code learn (8) : Component update
  9. React source code learn (9) :
  10. React source learning (10) : Fiber
  11. React source code (11) : Scheduling
  12. React: Reconciliation

What is Fiber?

Fiber is the new coordination engine in React 16. His main goal is to enable incremental rendering of the Virtual DOM. To learn more

Read on to learn more about Fiber or React Fiber architecture.

In terms of data structure, Fiber is actually a linked list data structure connected to another Fiber via return, Child, and Sibling respectively. You can also use nextEffect to go to the next side effect Fiber, or use firstEffect or lastEffect to jump to the first or last side effect Fiber. Next, let’s look at the source code:

export type Fiber = {|
  // The Fiber label is used to determine the Fiber type
  tag: WorkTag,
  // Unique identifier
  key: null | string,
  // Element type, used for coordination
  // Compare elementType with type, String, and ReactSymbols
  elementType: any,
  / / type
  type: any,
  // Local status
  stateNode: any,
  / / parent Fiber
  return: Fiber | null.// Single-chain list tree structure.
  / / Fiber
  child: Fiber | null.Fiber / / brother
  sibling: Fiber | null.// Current index
  index: number,
  // ref references support callback functions or react. createRef
  ref: null | (((handle: mixed) = > void) & {_stringRef: ?string}) | RefObject,
  // Props for waiting while updating
  pendingProps: any,
  // Props used when creating
  memoizedProps: any,
  // Update the queue, which is used for coordination
  updateQueue: UpdateQueue<any> | null.// State used for creation
  memoizedState: any,
  // The context has a linked list structure
  contextDependencies: ContextDependencyList | null.// Bitfields that describe properties related to Fiber and its subtrees. For example, the ConcurrentMode flag indicates whether subtrees should be asynchronous by default.
  // When Fiber is created, it inherits its parent's pattern. Additional flags can be set at creation time, but thereafter, the value should remain constant throughout the life of the Fiber, especially until its children are created.
  mode: TypeOfMode,
  // Side effects label
  effectTag: SideEffectTag,
  // The single-linked list lists fast paths to the next Fiber with side effects.
  nextEffect: Fiber | null.// The first and last Fiber in the subtree with side effects. This allows us to reuse portions of the linked list when we reuse the work done in this Fiber.
  firstEffect: Fiber | null.lastEffect: Fiber | null.// The current Fiber expiration time is used for scheduling sorting. The earlier the expiration time is, the earlier the execution will be.
  expirationTime: ExpirationTime,
  // The expiration time of the child, used to quickly determine if there are no pending changes in the subtree.
  childExpirationTime: ExpirationTime,
  // WorkInProgress repository (dual cache)
  alternate: Fiber | null|};Copy the code

There are still a few fields in the source code that are difficult to understand, but that’s ok, you’ll have a better understanding of Fiber after looking at scheduling and harmonization, because it runs through the whole harmonization.

Of course, you can also see the Fiber creation function in reactFiber.js if you’re interested.

Similarly, a new data structure, FiberRoot, which is closely related to reconciliation, is recognized during reconciliation and can also be learned first through ReactFiberroot.js.

Then we will introduce an implementation of the concept of Time Slicing with Fiber as the smallest unit: scheduling.