1. The role

In renderRoot, we catch the workloop error. We just mark the node accordingly. And then we go through the loop and we do the exact processing again in the completeUnitofwork which is the function that’s executed at each harmonic to the leaf

2. Check whether the node has brothers. Check whether the node has brothers

3. After completing the node, assign effect chain to facilitate the following commit phase to mount the real DOM. Mark this node on performUnitofwork. Completeunitofwork is a series of effects to make it easier for the COMMIT to perform the final operation on each node according to the chain

An effect in the Effect list is a fiber node that tells us which node needs to be updated

Effect data structure

{type: "", / /! UpdateQueue :[]//! Which property to update to which value}Copy the code

So the React virtual DOM updates the DOM in minimal form to improve performance. The chain is formed in completeUnitofwork

2.sideeffect

export type SideEffectTag = number;

// Don't change these two values. They're used by React Dev Tools.
export const NoEffect = / * * / 0b00000000000;/ /! Don't update
export const PerformedWork = / * * / 0b00000000001;/ /! Dev - tool use

// You can change the rest (and add more).
export const Placement = / * * / 0b00000000010;// The elements that need to be mounted in the COMMIT phase are placed on the effect chain
export const Update = / * * / 0b00000000100;/ /! The elements that need to be updated in the COMMIT phase are placed on the effect chain
export const PlacementAndUpdate = / * * / 0b00000000110;
export const Deletion = / * * / 0b00000001000;
export const ContentReset = / * * / 0b00000010000;
export const Callback = / * * / 0b00000100000;
export const DidCapture = / * * / 0b00001000000;
export const Ref = / * * / 0b00010000000;
export const Snapshot = / * * / 0b00100000000;

// Update & Callback & Ref & Snapshot
export const LifecycleEffectMask = /*   */ 0b00110100100;

// Union of all host effects
export const HostEffectMask = / * * / 0b00111111111;

export const Incomplete = / * * / 0b01000000000;
export const ShouldCapture = / * * / 0b10000000000;

Copy the code

3. Formation process of effect chain

For example, on the Levelup component setstate where the children in the span of b and c change and then execute the leaf component’s completeunitofwork, first the span of a but this fiber has no effect list and a itself has no effect Since his attributes do not change, he will not increase the Effect tag. Then we go to B and b has changed and it has an effect tag but it doesn’t have an effect-list because it doesn’t have any children so the Levelup component’s effect-list has added b’s Fiber object to C and the button has not changed and a has gone to Levelup Levelup executes completeUnitofWork to its own effect-list b and C on the App component chain, but it doesn’t change itself because the class component has an effect only if it changes its life cycle, So the App’s effect-list is b->c, and then the root’s effect-list is b-> C

4. Reset childExpirationTime

The important step in completeUnitofwork is that this property is the child of this fiber fiber has the highest priority updated expirationTime because the root node is always added to the scheduling queue when we schedulework, I has multiple subtrees under a node. Each subtree has a different task context Time. ChildExpirationTime is used to quickly find the task with the highest priority in the root subtree

The above picture

For example, Levelup, its childExpirationTime is the childExpirationTime of the highest priority task in its child node. For example, A and B have asynchronous tasks at the same time

In this case, Levelup’s childExpirationTime is the task of A, and fiber’s expirationTime should also be considered to select the smallest one

5.completeWork

1. Pop out the context because we pushed the context into performUnitwork

2. Native labels are initialized and updated

3. Initialize the listening event

6. com updateHostComponent pletework

1. Diff properties calculates the content that needs to be updated, that is, ** compares the virtual DOM to determine whether the node needs to be updated ** so as to update the DOM minimally

2. Different DOM properties have different processing

Catch error handling in renderRoot

1. Add incomplete side effects to the faulty node

2. Add side effects to nodes with error boundary on the parent chain

3. Create error-related updates

Is this mistake would have been up until we find can deal with the wrong type of component If not in finding the root component, getDerivedStateFromError/componentDidCatch have function is to handle the two life cycle error components, Then queue the update and add the Incomplete EffectTag to the fiber that reported the error and to the class component that handled the error, Fiber

ShouldCapture this effectTag and hand it to UnwindWork

8. Unwindwork and false capture

1. Different components are processed differently

2. Add didCapture to the shouldCapture component

process

RenderRoot error will be captured in the throwexception function this function will find can handle exceptions classes up components (getDerivedStateFromError/componentDidCatch two life cycle of a) Then give fiber an incomplete effectTag, capture a shouldCapture effectTag and create an Update Payload is the object returned by getDerivedStateFromError (an update to State), and callback executes the componentDidCatch life cycle and prints the error stack.

After executing throwException, it will go straight to CompleteUnitofWork. At this point, the component is incomplete, and unwindwork will be executed, which will handle any class component that can handle exceptions, Put shouldCapture empty and add didCapture, the important thing is that this function returns a value, fiber if the current component can catch an exception class component, and Null if it’s not, Completeunitofwork continues with the return value next. When this value is null, we go straight to the parent element, and set its effectTag to incomplete. Then, when fiber completes completeUnitofwork, The parent element continues to execute completeUnitofwork, since there is no return at this point, so the while(true) process continues, same as above, when we have fiber as a component that can catch exceptions, We are going to next this fiber, we are going to return this next, we are going to perform PerformUnitofwork again, we are going to update this node again, but we have an update with error when we process update Ue, We will update the state to payload, then re-renderchildren, and execute the callback of the upload.

So when levelup throws an exception and our App catches an exception then fiber will add an upload, and Levelup goes into completework, If he finds that he can’t catch the exception, he goes up to the APP and performs completework, he does catch the exception and returns this fiber, performs performwork to continue updating, performs upload, updates state, continues rendering child elements.