Welcome to read the React source code analysis series:
React16 source code analysis (I) - illustration of Fiber architecture
React16 source code analysis (2) - create update
React16 source code analysis (III) - ExpirationTime
React16 source code analysis (IV) - Scheduler
React16 source code analysis (V) - update process rendering stage 1
React16 source code analysis (VI) - update process rendering stage 2
React16 source code analysis (7) - update process rendering stage 3
React16 source code analysis (VIII) - update process submission stage
Updating...
Remember that we called beginWork in performUnitOfWork, and beginWork will always update along the subtree and return to the child of the current node every time. Even if there are multiple children, only the first one will be returned. Then when you reach the leaf node along the tree structure, there is no child, so beginwork returns null. If NULL is returned, completeUnitOfWork is called.
Take a look at the code:
// Start component update function performUnitOfWork(workInProgress: Fiber): Fiber | null { // The current, flushed, state of this fiber is the alternate. // Ideally nothing should rely on this, but relying on it here // means that we don't need an additional field on the work in // progress. // Get a stand in for fiber, and reconciliation is done on the stand in. // Then go straight to begin work const current = workInProgress.alternate; // ...... let next; // ..... // Start-up next = beginWork(current, workInProgress, nextRenderExpirationTime); workInProgress.memoizedProps = workInProgress.pendingProps; // ...... // The current fiber tree has reached the leaf node if (next === null) { // If this doesn't spawn new work, complete the current work. next = completeUnitOfWork(workInProgress); } ReactCurrentOwner.current = null; return next; }
completeUnitOfWork
What did this completeUnitOfWork do? There are three main points:
1. Call different processing methods according to whether to interrupt or not
2. Judge whether there are sibling nodes to perform different operations
3. Assign the effect chain after completing the node
function completeUnitOfWork(workInProgress: Fiber): Fiber | null { // Attempt to complete the current unit of work, then move to the // next sibling. If there are no more siblings, return to the // parent fiber. while (true) { // The current, flushed, state of this fiber is the alternate. // Ideally nothing should rely on this, but relying on it here // means that we don't need an additional field on the work in // progress. const current = workInProgress.alternate; const returnFiber = workInProgress.return; const siblingFiber = workInProgress.sibling; // No error capture, normal rendering logic if ((workInProgress.effectTag & Incomplete) === NoEffect) { // This fiber completed. // Update of nodes complete nextUnitOfWork = completeWork( current, workInProgress, nextRenderExpirationTime, ); // Reset childExpirationTime resetChildExpirationTime(workInProgress, nextRenderExpirationTime); // Build the effect chain for the commitRoot submission phase if ( returnFiber !== null && // Do not append effects to parents if a sibling failed to complete (returnFiber.effectTag & Incomplete) === NoEffect ) { // Append all the effects of the subtree and this fiber onto the effect // list of the parent. The completion order of the children affects the // side-effect order. // Glue your own effect chain behind the effect of the parent node if (returnFiber.firstEffect === null) { returnFiber.firstEffect = workInProgress.firstEffect; } if (workInProgress.lastEffect !== null) { if (returnFiber.lastEffect !== null) { returnFiber. .nextEffect = workInProgress.firstEffect; } returnFiber.lastEffect = workInProgress.lastEffect; } // If this fiber had side-effects, we append it AFTER the children's // side-effects. We can perform certain side-effects earlier if // needed, by doing multiple passes over the effect list. We don't want // to schedule our own side-effect on our own list because if end up // reusing children we'll schedule this effect onto itself since we're // at the end. const effectTag = workInProgress.effectTag; // Skip both NoWork and PerformedWork tags when creating the effect list. // PerformedWork effect is read by React DevTools but shouldn't be committed. // If you find that you also have an effect, you should add yourself to the effect chain of the parent node. if (effectTag > PerformedWork) { if (returnFiber.lastEffect !== null) { returnFiber.lastEffect.nextEffect = workInProgress; } else { returnFiber.firstEffect = workInProgress; } returnFiber.lastEffect = workInProgress; } } // If there is a sibling node, return to the sibling node and continue to beinWork. if (siblingFiber !== null) { // If there is more work to do in this returnFiber, do that next. return siblingFiber; } else if (returnFiber !== null) { // No sibling to find parent // If there's no more work in this returnFiber. Complete the returnFiber. workInProgress = returnFiber; continue; } else { // We've reached the root. // Keep looking up or to the right for the sibling node, find null, reach the root vertex, and finish the update phase and enter the commitRoot submission phase. return null; } } else { // ...... return null; } } // Without this explicit null return Flow complains of invalid return type // TODO Remove the above while(true) loop // eslint-disable-next-line no-unreachable return null; }
completeWork
We can see from the following functions that the function does different processing for different types of nodes according to workInProgress.tag. Most of the tags do not operate or are just pop context. Only HostComponent, HostText, suspendcomponent have slightly more complex operations. Next, I mainly analyze HostComponent and HostText. Suspendecomponent will be explained later.
function completeWork( current: Fiber | null, workInProgress: Fiber, renderExpirationTime: ExpirationTime, ): Fiber | null { const newProps = workInProgress.pendingProps; switch (workInProgress.tag) { case IndeterminateComponent: break; case LazyComponent: break; case SimpleMemoComponent: case FunctionComponent: break; case ClassComponent: { const Component = workInProgress.type; if (isLegacyContextProvider(Component)) { popLegacyContext(workInProgress); } break; } case HostRoot: { popHostContainer(workInProgress); popTopLevelLegacyContextObject(workInProgress); const fiberRoot = (workInProgress.stateNode: FiberRoot); if (fiberRoot.pendingContext) { fiberRoot.context = fiberRoot.pendingContext; fiberRoot.pendingContext = null; } if (current === null || current.child === null) { // If we hydrated, pop so that we can delete any remaining children // that weren't hydrated. popHydrationState(workInProgress); // This resets the hacky state to fix isMounted before committing. // TODO: Delete this when we delete isMounted and findDOMNode. workInProgress.effectTag &= ~Placement; } updateHostContainer(workInProgress); break; } case HostComponent: { // It's a little complicated here. I'll explain it later. break; } case HostText: { // Explain later break; } case ForwardRef: break; case SuspenseComponent: { const nextState = workInProgress.memoizedState; const prevState = current !== null ? current.memoizedState : null; const nextDidTimeout = nextState !== null && nextState.didTimeout; const prevDidTimeout = prevState !== null && prevState.didTimeout; if (nextDidTimeout !== prevDidTimeout) { // If this render commits, and it switches between the normal state // and the timed-out state, schedule an effect. workInProgress.effectTag |= Update; } break; } case Fragment: break; case Mode: break; case Profiler: break; case HostPortal: popHostContainer(workInProgress); updateHostContainer(workInProgress); break; case ContextProvider: // Pop provider fiber popProvider(workInProgress); break; case ContextConsumer: break; case MemoComponent: break; case IncompleteClassComponent: { // Same as class component case. I put it down here so that the tags are // sequential to ensure this switch is compiled to a jump table. const Component = workInProgress.type; if (isLegacyContextProvider(Component)) { popLegacyContext(workInProgress); } break; } default: invariant( false, 'Unknown unit of work tag. This error is likely caused by a bug in ' + 'React. Please file an issue.', ); } return null; }
HostComponent
As we have said before, tag represents a normal dom node, such as: div, for HostComponent.
Summary:
1. createInstance: create dom
2. appendAllChildren: add the host Component of children to the newly created dom to form a dom tree.
3. finalizeInitialChildren: set properties for dom.
case HostComponent: { popHostContext(workInProgress); const rootContainerInstance = getRootHostContainer(); const type = workInProgress.type; if (current !== null && workInProgress.stateNode != null) { updateHostComponent( current, workInProgress, type, newProps, rootContainerInstance, ); if (current.ref !== workInProgress.ref) { markRef(workInProgress); } } else { // First render // ...... // To create an instance is to create a dom node object, which contains the information of fiber and props. let instance = createInstance( type, newProps, rootContainerInstance, currentHostContext, workInProgress, ); // Build the dom tree, because we are from bottom to top, so we just need to append the first level of child nodes below me to ourselves. appendAllChildren(instance, workInProgress, false, false); // Certain renderers require commit-time effects for initial mount. // (eg DOM renderer supports auto-focus for certain elements). // Make sure such renderers get scheduled for later work. if ( // Set properties and initialize event listening finalizeInitialChildren( instance, type, newProps, rootContainerInstance, currentHostContext, ) ) { // If auto focus is needed // Mark effect as UPDATE markUpdate(workInProgress); } // stateNode points to the created dom node workInProgress.stateNode = instance; // ...... } break; }
Let's start with the first rendering
createInstance
1. Create dom node
2. Record the created fiber and props information on the dom node object.
export function createInstance( type: string, props: Props, rootContainerInstance: Container, hostContext: HostContext, internalInstanceHandle: Object, // workInProgress of the current node passed in ): Instance { let parentNamespace: string; // ...... parentNamespace = ((hostContext: any): HostContextProd); // Create dom node const domElement: Instance = createElement( type, props, rootContainerInstance, parentNamespace, ); // Give domelement [Zou reactinternalinstance $] = internalinstancehandle. // That is to say, it points to the corresponding fiber node. precacheFiberNode(internalInstanceHandle, domElement); // domElement[__reactEventHandlers$] = props updateFiberProps(domElement, props); return domElement; }
appendAllChildren
Because we are from the bottom to the top, we just need to append the first level of child nodes below me to the bottom of ourselves.
1. Traverse the sibling nodes of the node
2. If it is a dom native node or text, directly appendChild
3. If it is another node but has child nodes, then go to traverse its child nodes until the dom native node or text is found.
appendAllChildren = function( parent: Instance, workInProgress: Fiber, needsVisibilityToggle: boolean, isHidden: boolean, ) { // We only have the top Fiber that was created but we need recurse down its // children to find all the terminal nodes. let node = workInProgress.child; while (node !== null) { if (node.tag === HostComponent || node.tag === HostText) { // If it is a dom native node or text, directly appendChild appendInitialChild(parent, node.stateNode); } else if (node.tag === HostPortal) { // If we have a portal child, then we don't want to traverse // down its children. Instead, we'll get insertions from each child in // the portal directly. } else if (node.child !== null) { // If it is another node but has children, then go to traverse its children until you find the dom native node or the text. node.child.return = node; node = node.child; continue; } if (node === workInProgress) { return; } while (node.sibling === null) { if (node.return === null || node.return === workInProgress) { return; } node = node.return; } // Traverse the sibling node of node node.sibling.return = node.return; node = node.sibling; } };
finalizeInitialChildren
It is mainly to set some initial values of dom elements. When setting the initial value, there are special processing for different dom elements. These processes are in the setInitialProperties function.
export function finalizeInitialChildren(
domElement: Instance,
type: string,
props: Props,
rootContainerInstance: Container,
hostContext: HostContext,
): boolean {
//The attributes corresponding to props that should be displayed on DOM nodes, how to mount them to DOM, and some event listening are related.
setInitialProperties(domElement, type, props, rootContainerInstance);
//auto focus required
return shouldAutoFocusHostComponent(type, props);
}
updateHostComponent
1. Call prepareUpdate to get the result after comparing new and old props.
2. Put the result in workInProgress.updateQueue
3. Mark the effect of the current node as UPDATE.
Note: the result after comparison is as follows: updatePayload: [k1,null,k2,v2,k3,v3]
updateHostComponent = function( current: Fiber, workInProgress: Fiber, type: Type, newProps: Props, rootContainerInstance: Container, ) { // If we have an alternate, that means this is an update and we need to // schedule a side-effect to do the updates. // Previous oldProps const oldProps = current.memoizedProps; if (oldProps === newProps) { // In mutation mode, this is sufficient for a bailout because // we won't touch this node even if children changed. return; } // If we get updated because one of our children updated, we don't // have newProps so we'll have to reuse them. // TODO: Split the update API as separate for the props vs. children. // Even better would be if children weren't special cased at all tho. // dom object of current node const instance: Instance = workInProgress.stateNode; const currentHostContext = getHostContext(); // TODO: Experiencing an error where oldProps is null. Suggests a host // component is hitting the resume path. Figure out why. Possibly // related to `hidden`. // The results of comparing old and new props const updatePayload = prepareUpdate( instance, type, oldProps, newProps, rootContainerInstance, currentHostContext, ); // TODO: Type this specific to this type of component. // Put the results in workInProgress.updateQueue workInProgress.updateQueue = (updatePayload: any); // If the update payload indicates that there is a change or if there // is a new ref we mark this as an update. All the work is done in commitWork. if (updatePayload) { // Mark the effect of the current node as UPDATE markUpdate(workInProgress); } };
prepareUpdate:
This function just calls diffProperties and returns
export function prepareUpdate( domElement: Instance, type: string, oldProps: Props, newProps: Props, rootContainerInstance: Container, hostContext: HostContext, ): null | Array<mixed> { // ...... return diffProperties( domElement, type, oldProps, newProps, rootContainerInstance, ); }
diffProperties
1. Compare the preparation of new and old props extracted according to different label nodes
2. Traverse the old props for the first time and set the properties to be deleted to null.
3. Traverse the new props for the second time, and push the new props to updatePayload
4. Finally generate updatePayload: [k1,null,k2,v2,k3,v3]
Note: different attributes here have different special processing, such as STYLE, which needs to be expanded.
// Calculate the diff between the two objects. export function diffProperties( domElement: Element, tag: string, lastRawProps: Object, nextRawProps: Object, rootContainerElement: Element | Document, ): null | Array<mixed> { let updatePayload: null | Array<any> = null; let lastProps: Object; let nextProps: Object; // 1. Compare the preparation of new and old props extracted according to different label nodes switch (tag) { case 'input': lastProps = ReactDOMInput.getHostProps(domElement, lastRawProps); nextProps = ReactDOMInput.getHostProps(domElement, nextRawProps); updatePayload = []; break; case 'option': lastProps = ReactDOMOption.getHostProps(domElement, lastRawProps); nextProps = ReactDOMOption.getHostProps(domElement, nextRawProps); updatePayload = []; break; case 'select': lastProps = ReactDOMSelect.getHostProps(domElement, lastRawProps); nextProps = ReactDOMSelect.getHostProps(domElement, nextRawProps); updatePayload = []; break; case 'textarea': lastProps = ReactDOMTextarea.getHostProps(domElement, lastRawProps); nextProps = ReactDOMTextarea.getHostProps(domElement, nextRawProps); updatePayload = []; break; default: lastProps = lastRawProps; nextProps = nextRawProps; if ( typeof lastProps.onClick !== 'function' && typeof nextProps.onClick === 'function' ) { // TODO: This cast may not be sound for SVG, MathML or custom elements. trapClickOnNonInteractiveElement(((domElement: any): HTMLElement)); } break; } assertValidProps(tag, nextProps); // 2. Traverse the old props for the first time and set the properties to be deleted to null. let propKey; let styleName; let styleUpdates = null; for (propKey in lastProps) { if ( nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey) || lastProps[propKey] == null ) { continue; } if (propKey === STYLE) { const lastStyle = lastProps[propKey]; for (styleName in lastStyle) { if (lastStyle.hasOwnProperty(styleName)) { if (!styleUpdates) { styleUpdates = {}; } styleUpdates[styleName] = ''; } } } else if (propKey === DANGEROUSLY_SET_INNER_HTML || propKey === CHILDREN) { // Noop. This is handled by the clear text mechanism. } else if ( propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING ) { // Noop } else if (propKey === AUTOFOCUS) { // Noop. It doesn't work on updates anyway. } else if (registrationNameModules.hasOwnProperty(propKey)) { // This is a special case. If any listener updates we need to ensure // that the "current" fiber pointer gets updated so we need a commit // to update this element. if (!updatePayload) { updatePayload = []; } } else { // For all other deleted properties we add it to the queue. We use // the whitelist in the commit phase instead. (updatePayload = updatePayload || []).push(propKey, null); } } // 3. Traverse the new props for the second time, and push the new props to updatePayload for (propKey in nextProps) { const nextProp = nextProps[propKey]; const lastProp = lastProps != null ? lastProps[propKey] : undefined; if ( !nextProps.hasOwnProperty(propKey) || nextProp === lastProp || (nextProp == null && lastProp == null) ) { continue; } if (propKey === STYLE) { if (lastProp) { // Unset styles on `lastProp` but not on `nextProp`. for (styleName in lastProp) { if ( lastProp.hasOwnProperty(styleName) && (!nextProp || !nextProp.hasOwnProperty(styleName)) ) { if (!styleUpdates) { styleUpdates = {}; } styleUpdates[styleName] = ''; } } // Update styles that changed since `lastProp`. for (styleName in nextProp) { if ( nextProp.hasOwnProperty(styleName) && lastProp[styleName] !== nextProp[styleName] ) { if (!styleUpdates) { styleUpdates = {}; } styleUpdates[styleName] = nextProp[styleName]; } } } else { // Relies on `updateStylesByID` not mutating `styleUpdates`. if (!styleUpdates) { if (!updatePayload) { updatePayload = []; } updatePayload.push(propKey, styleUpdates); } styleUpdates = nextProp; } } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { const nextHtml = nextProp ? nextProp[HTML] : undefined; const lastHtml = lastProp ? lastProp[HTML] : undefined; if (nextHtml != null) { if (lastHtml !== nextHtml) { (updatePayload = updatePayload || []).push(propKey, '' + nextHtml); } } else { // TODO: It might be too late to clear this if we have children // inserted already. } } else if (propKey === CHILDREN) { if ( lastProp !== nextProp && (typeof nextProp === 'string' || typeof nextProp === 'number') ) { (updatePayload = updatePayload || []).push(propKey, '' + nextProp); } } else if ( propKey === SUPPRESS_CONTENT_EDITABLE_WARNING || propKey === SUPPRESS_HYDRATION_WARNING ) { // Noop } else if (registrationNameModules.hasOwnProperty(propKey)) { if (nextProp != null) { // We eagerly listen to this even though we haven't committed yet. if (__DEV__ && typeof nextProp !== 'function') { warnForInvalidEventListener(propKey, nextProp); } ensureListeningTo(rootContainerElement, propKey); } if (!updatePayload && lastProp !== nextProp) { // This is a special case. If any listener updates we need to ensure // that the "current" props pointer gets updated so we need a commit // to update this element. updatePayload = []; } } else { // For any other property we always add it to the queue and then we // filter it out using the whitelist during the commit. (updatePayload = updatePayload || []).push(propKey, nextProp); } } if (styleUpdates) { (updatePayload = updatePayload || []).push(STYLE, styleUpdates); } // 4. Finally generate updatePayload: [k1,null,k2,v2,k3,v3] return updatePayload; }
HostText
1. When updating, call updateHostText
2. When rendering for the first time, call createTextInstance.
case HostText: { let newText = newProps; if (current && workInProgress.stateNode != null) { // To update const oldText = current.memoizedProps; // If we have an alternate, that means this is an update and we need // to schedule a side-effect to do the updates. updateHostText(current, workInProgress, oldText, newText); } else { // ...... // First render workInProgress.stateNode = createTextInstance( newText, rootContainerInstance, currentHostContext, workInProgress, ); } break; }
updateHostText
This is a huge and simple way to directly compare whether the text is the same.
updateHostText = function( current: Fiber, workInProgress: Fiber, oldText: string, newText: string, ) { // If the text differs, mark it as an update. All the work in done in commitWork. if (oldText !== newText) { markUpdate(workInProgress); } };
createTextInstance
This method is also very simple. It creates a TextNode text node.
And give textelement [\\\\\\\\'internalinstance $] = internalinstancehandle = the current fiber node.
export function createTextInstance( text: string, rootContainerInstance: Container, hostContext: HostContext, internalInstanceHandle: Object, ): TextInstance { const textNode: TextInstance = createTextNode(text, rootContainerInstance); precacheFiberNode(internalInstanceHandle, textNode); return textNode; }
No matter how complicated the world is, it still remains lovely.
I'm the grapefruit fairy. If there is something wrong with the article, please correct it.~