关于react.js: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