updateFunctionComponent
typescript
function updateFunctionComponent(
current,
workInProgress,
Component,
nextProps: any,
renderExpirationTime,
) {
let nextChildren;
// 调用 renderWithHooks ,将函数式组件渲染,返回一个JSXElement
// 然后调用reconcileChildren将其变成Fiber对象
// renderWithHooks 在后续看hook得实现的详细阅读
nextChildren = renderWithHooks(
current,
workInProgress,
Component,
nextProps,
context,
renderExpirationTime,
);
if (current !== null && !didReceiveUpdate) {
bailoutHooks(current, workInProgress, renderExpirationTime);
// 在当前帧没有更新则跳过当前节点的更新
return bailoutOnAlreadyFinishedWork(
current,
workInProgress,
renderExpirationTime,
);
}
// React DevTools reads this flag.
workInProgress.effectTag |= PerformedWork;
// 根据函数组件返回的JSXElement生成Fiber对象
reconcileChildren(
current,
workInProgress,
nextChildren,
renderExpirationTime,
);
// 将当前节点的child返回到workLoop继续调用
return workInProgress.child;
}reconcileChildren下文分析