React render过程

ReactDOM.render()

1. 第一次渲染，入口

render

params

1. element: 经过 babel 编译后 React.createElement 对象
2. container: dom 对象，div#root
3. callback: 渲染完成后到回调函数（不需要关注，一般没用）

legacyRenderSubtreeIntoContainer

params

1. parentComponent: null
2. children: React.createElement
3. container: div#root
4. forceHydrate: false; 客户端渲染 和 服务端渲染 区分标识
5. callback

功能

1. 创建 FiberRoot 和 RootFiber

updateContainer

params

1. element: React.createElement
2. container: FiberRoot
3. parentComponent
4. callback

功能

1. 通过 rootFiber 得到 lane
2. 创建 update 对象，放到 updateQueue 中

scheduleUpdateOnFiber

params

1. fiber
2. lane
3. eventTime

功能

1. 获取 fiber 的 root: markUpdateLaneFromFiberToRoot

performSyncWorkOnRoot

params

1. root: FiberRoot

功能

1. 执行 renderRoot 和 commitRoot
2. root.finishedWork = root.current.alternate(workInProgress)
3. root.finishedLanes = lanes;

renderRoot

params

1. root
2. lanes

功能

1. 创建 workInProgress: prepareFreshStack

• root.finishedWork 、 finishedLanes 恢复默认值
• workInProgressRoot = root;
• 给全局 workInProgress 赋值

2. 执行 workLoop

workLoop

功能

1. 执行 while 循环: 判断条件—— workInProgress !== null；（只有 rootFiber.return 是 null）

performUnitOfWork

params

1. unitOfWork: workInProgress

功能

1. 执行 beginWork
2. 执行 completeUnitOfWork

commitRoot

params

1. root