react root

[clumsyme]

function App() {
    return (
        <div>
            <h1>0</h1>
            <button>Click</button>
        </div>
    )
}

stateDiagram
    FiberRootNode: ReactDom.createRoot 生成

    HostRootFiber: typeof：FiberNode
    HostRootFiber: tag：HostRoot
    HostRootFiber: return：null


    container: 渲染 Dom 节点，#root

    FiberRootNode --> HostRootFiber: current
    HostRootFiber --> FiberRootNode: stateNode

    container --> HostRootFiber: __reactContainere$random
    FiberRootNode --> container: containerInfo

    HostRootFiber --> App: child
    App --> HostRootFiber: return

    App --> div: child
    div --> App: return

    div --> h1: child
    h1 --> div: return
    h1 --> button: sibling

    button --> div: return

    FiberRootNode --> HostRootFiber：alter: Nextcurrent

    HostRootFiber：alter --> App：alter: child
    App：alter --> HostRootFiber：alter: return

    App：alter --> div：alter: child
    div：alter --> App：alter: return

    div：alter --> h1：alter: child
    h1：alter --> div：alter: return
    h1：alter --> button：alter: sibling

    button：alter --> div：alter: return

Loading