React源码 - 初始化元素

版本：17.0.0
创建调试项目可以下载此项目 - 地址 （https://github.com/mzvast/debug-react-ts）

一. 从React项目初始加载项目源码分析，分析如下代码在 React中的执行过程

从 ReactDOM的 render 方法开始调试

下图中主要创建了一个 FiberRootNode 对象，包含 containerInfo(挂载的元素), current对象（RootFiber ）

此图中为 FiberRoot 中添加 current 值的代码

此图中为 RootFiber 添加 queue 的代码

更新方法 unbatchedUpdates 调用 传入函数中的方法 updateContainer，updateContainer方法创建了一个更新 update

下图中的enqueueUpdate方法将 update 值 附加到 RootFiber 的 updateQueue.shared.pending对象中

scheduleUpdateOnFiber => performSyncWorkOnRoot => renderRootSync(根据 ReactDOM.render传入的children为起点构建 Fiber 和 alternate )
--------------------------------------------------------------------------------renderRootSync函数执行之后 commitRoot (更新 dom 树)

renderRootSync => prepareFreshStack => createWorkInProgress
下图中的方法复制了 RootFiber ，并赋值给了 RootFiber.alternate

renderRootSync => workLoopSync => performUnitOfWork

一直循环 workInProgress ，next 为 begin 函数的返回值，next 为 null 时这个节点遍历完成，执行 completeUnitOfWork

beginWork 根据 tag 创建 Fiber 元素 => updateHostRoot

updateHostRoot => cloneUpdateQueue 克隆了 workInProgress.updateQueue, 目的是不再和 RootFiber (current) 引用同一个对象，更改 workInProgress.updateQueue 时 RootFiber (current) 的 updateQueue 不会改变


updateHostRoot => processUpdateQueue
processUpdateQueue 函数
1.将RootFiber (current).updateQueue.shared.pending中的 update赋值到了 updateQueue.firstBaseUpdate，updateQueue.lastBaseUpdate，并清空了 pending的值

2.workInProgress（alternate）.updateQueue.shared.pending中的 update 赋值到了 updateQueue.baseState 和 memoizedState，并清空了 pending的值

updateHostRoot => reconcileChildren => reconcileChildFibers
根据传入的 children 创建 Fiber, 并将值添加到 workInProgress.child上

reconcileChildFibers
根据不同的节点类型
1.如果此元素有子元素，则根据子元素为单个的情况创建Fiber, 并将 return 字段指向父元素，为多个的情况则遍历子元素，通过sibling字段连接子元素，将第一个子元素为父元素的子元素
2.如何没有子节点， 则 workInProgress.child 值为空，执行上述提到的 更新 dom 的 方法 commitRoot