import { createTextInstance , finalizeInitialChildren , prepareUpdate , Props , Type , } from '../react-dom/ReactDOMHostConfig' ; import { NoFlags , StaticMask , Update } from './ReactFiberFlags' ; import { appendInitialChild , createInstance } from './ReactFiberHostConfig' ; import { mergeLanes , NoLanes } from './ReactFiberLane' ; import { Fiber } from './ReactInternalTypes' ; import { FunctionComponent , HostComponent , HostRoot , HostText , IndeterminateComponent , MemoComponent , SimpleMemoComponent , } from './ReactWorkTags' ; param parent param workInProgress returns const appendAllChildren = ( parent , workInProgress ) : void => { let node = workInProgress . child ; while ( node !== null ) { if ( node . tag === HostComponent || node . tag === HostText ) { appendInitialChild ( parent , node . stateNode ) ; } else if ( node . child !== null ) { node . child . return = node ; node = node . child ; continue ; } if ( node === workInProgress ) { return ; } while ( node . sibling === null ) { /**
             * 比如下面的例子
             *          FunctionComp A
             * FunctionCompB     FunctionCompC    FunctionCompD
             *                       domE
             * 如果进入循环时此时node为domE，一轮循环后当node被赋值为FunctionCompC后就会跳出这个循环
             * 然后继续进行FunctionCompD的工作
             *
             */ if ( node . return === null || node . return === workInProgress ) return ; node = node ?. return ?? null ; } node . sibling . return = node . return ; node = node . sibling ; } } ; param completedWork returns const bubbleProperties = ( completedWork ) : boolean => { const didBailout = completedWork . alternate !== null && completedWork . alternate . child === completedWork . child ; let subtreeFlags = NoFlags ; let newChildLanes = NoLanes ; if ( ! didBailout ) { let child = completedWork . child ; while ( child !== null ) { newChildLanes = mergeLanes ( newChildLanes , mergeLanes ( child . lanes , child . childLanes ) ) ; subtreeFlags |= child . subtreeFlags ; subtreeFlags |= child . flags ; child . return = completedWork ; child = child . sibling ; } completedWork . subtreeFlags |= subtreeFlags ; } else { let child = completedWork . child ; while ( child !== null ) { newChildLanes = mergeLanes ( newChildLanes , mergeLanes ( child . lanes , child . childLanes ) ) ; subtreeFlags |= child . subtreeFlags & StaticMask ; subtreeFlags |= child . flags & StaticMask ; child . return = completedWork ; child = child . sibling ; } completedWork . subtreeFlags |= subtreeFlags ; } completedWork . childLanes = newChildLanes ; return didBailout ; } ; param workInProgress const markUpdate = ( workInProgress ) => { workInProgress . flags |= Update ; } ; param current param workInProgress param oldText param newText const updateHostText = ( current , workInProgress , oldText , newText ) => { if ( oldText !== newText ) { markUpdate ( workInProgress ) ; } } ; const updateHostComponent = ( current , workInProgress , type , newProps ) => { const oldProps = current . memoizedProps ; if ( oldProps === newProps ) { return ; } const instance = workInProgress . stateNode ; const updatePayload = prepareUpdate ( instance , type , oldProps , newProps ) ; workInProgress . updateQueue = updatePayload ; if ( updatePayload ) { markUpdate ( workInProgress ) ; } } ; export const completeWork = ( current , workInProgress ) : Fiber | null => { const newProps = workInProgress . pendingProps ; switch ( workInProgress . tag ) { case IndeterminateComponent : case FunctionComponent : case SimpleMemoComponent : case MemoComponent : bubbleProperties ( workInProgress ) ; return null ; case HostRoot : { bubbleProperties ( workInProgress ) ; return null ; } case HostComponent : { const type = workInProgress . type ; if ( current !== null && workInProgress . stateNode != null ) { updateHostComponent ( current , workInProgress , type , newProps ) ; } else { const instance = createInstance ( type , newProps , workInProgress ) ; appendAllChildren ( instance , workInProgress ) ; workInProgress . stateNode = instance ; if ( finalizeInitialChildren ( instance , type , newProps ) ) { throw new Error ( 'Not Implement' ) ; } } bubbleProperties ( workInProgress ) ; return null ; } case HostText : { const newText = newProps ; if ( current && workInProgress . stateNode !== null ) { /**
                 * 如果我们复用了改节点，那么意味着我们需要一个side-effect去做这个更新
                 */ const oldText = current . memoizedProps ; updateHostText ( current , workInProgress , oldText , newText ) ; } else { workInProgress . stateNode = createTextInstance ( newText ) ; } bubbleProperties ( workInProgress ) ; return null ; } } throw new Error ( 'Not implement' ) ; } ;