First of all, our entry files are as follows

packages/react-reconciler/src/ReactFiber.new.js
Copy the code

Virtual DOM; We all know about the virtual DOM, but it’s actually officially known as Fiber in React

What I have learned so far is that, in Replay 15 and before, the Reconciler created the virtual DOM recursively, a recursive process that cannot be interrupted. If the component tree is deep, recursion can take up a lot of thread time, resulting in lag.

After Act16, the Fiber architecture allowed updates to be converted to asynchronous interruptible updates

Read up ~FiberNode

Lines 1-112 seem to have little to do with the text and more to do with the various imports and setting of environment variables, starting with line 114

The FiberNode function takes four parameters and uses type annotations because the file contains @flow.

This is clearly a constructor that defines the Fiber node’s property values. In the function below, I removed a bit of code to optimize performance and another bit of code for testing purposes

function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
  // The instance variable contains attributes such as tag, key, type, state, etc
  this.tag = tag;
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null;

  / / Fiber; From here on out, each part is going to be parsed separately and I'm not going to write any comments, some of them are going to be drawn
  this.return = null;
  this.child = null;
  this.sibling = null;
  this.index = 0;

  this.ref = null;

  this.pendingProps = pendingProps;
  this.memoizedProps = null;
  this.updateQueue = null;
  this.memoizedState = null;
  this.dependencies = null;

  this.mode = mode;

  // Effects
  this.flags = NoFlags;
  this.subtreeFlags = NoFlags;
  this.deletions = null;

  this.lanes = NoLanes;
  this.childLanes = NoLanes;

  this.alternate = null;
}
Copy the code

So LET me try to follow the official space section a little bit, the first part is easier to understand

Instance data/static data

// The instance variable contains attributes such as tag, key, type, state, etc
  this.tag = tag;
  this.key = key;
  this.elementType = null;
  this.type = null;
  this.stateNode = null;
Copy the code

This section stores information about components, where the meanings of each attribute respectively represent:

  • tag

    Note that tag can be seen in many places below, and we know from annotations that this is a WorkTag type (so you can see why TypeScript is so popular, you can see where to look next).

    So you can see

export type WorkTag =
  | 0
  | 1. |23
  | 24;

export const FunctionComponent = 0;
// Functional components
export const ClassComponent = 1;
/ / class components
export const IndeterminateComponent = 2; .export const LegacyHiddenComponent = 23;
export const CacheComponent = 24;
Copy the code

Aw, we seem to be seeing something amazing all at once. 0 for functional components, 1 for class components, and 2 for indeterminate components…… You go down like that. This is clearly the React component type, so one of the things we learned from reading the source code

TODO: 25 component types for React

  • Key is the same as you think it is

  • elementType

    We can’t really see much from this paragraph, scroll down.

    Suspected is not much different from Type…… Yeah, I don’t understand. Look it up

  • type

    For FunctionComponent, the function itself, for ClassComponent, class, and for HostComponent, DOM node tagName

  • stateNode

    This is easy to do. This represents real nodes

Return, Child, Sibling, index

These properties are used to generate the Fiber Tree structure

// Point to the upper-level Fiber node
this.return = null;
// Point to the next level Fiber node
this.child = null;
// Point to the first sibling Fiber node on the right
this.sibling = null;
// The number of nodes of the same level
this.index=0;
Copy the code

Let’s take an example of the Fiber Tree structure

function App(){
    return (
        <div>
        	<p>Hello</p>
            <div>
            	<span>Fiber</span>
            </div>
        </div>)}Copy the code

The result is a Fiber tree, which corresponds to what we call a virtual DOM tree, listing the nodes first

I am not clear about the detailed relationship between DOM and Fiber, so I will leave the diagram behind and connect the rest. As follows:

BUT…… Why not name the return parent

More data *from Kasong

// It looks quite explosive, save the information about the state changes caused by this update
this.pendingProps = pendingProps;
this.memoizedProps = null;
this.updateQueue = null;
this.memoizedState = null;
this.dependencies = null;

this.mode = mode;

// Save the DOM operations caused by this update
this.effectTag = NoEffect;
this.nextEffect = null;

this.firstEffect = null;
this.lastEffect = null;

// Scheduling priorities are related
this.lanes = NoLanes;
this.childLanes = NoLanes;
Copy the code

This section has many associations, including some parameters in the update process and scheduling priority, which can be understood literally at first.

The parent component passes in parameters for the props (pendingProps, memoizeProps) and the props (pending, memoizeProps)

Similarly, we’ll get to these parameters later