10.函数组件的初始化

packages/index.jsx

import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'))
function FunctionComponent() {
    return <div>
        <div>课程名称：手写React高质量源码迈向高阶开发</div>
        <div>讲师：杨艺韬</div>
        <div>电子书：<a style={{ color: 'blue' }} href="https://www.yangyitao.com/react18">https://www.yangyitao.com/react18</a></div>
    </div>
}
root.render(<FunctionComponent/>)
console.log("index.jsx", <FunctionComponent/>);

packages/react-reconciler/ReactFiberBeginWork.js

+ import { HostComponent, HostRoot, HostText,IndeterminateComponent, FunctionComponent } from "./ReactWorkTags";
+ import { renderWithHooks } from 'react-reconciler/src/ReactFiberHooks';

+export function mountIndeterminateComponent(current, workInProgress, Component) {
+  const props = workInProgress.pendingProps;
+  const value = renderWithHooks(current, workInProgress, Component, props);
+  workInProgress.tag = FunctionComponent;
+  reconcileChildren(current, workInProgress, value);
+  return workInProgress.child;
+}

export function beginWork(current, workInProgress) {
  switch (workInProgress.tag) {
+    case IndeterminateComponent:
+      return mountIndeterminateComponent(current, workInProgress, workInProgress.type);
    case HostRoot:
      return updateHostRoot(current, workInProgress);
    case HostComponent:
      return updateHostComponent(current, workInProgress);
    case HostText:
      return null;
    default:
      return null;
  }
}

packages/react-reconciler/ReactFiberHooks.js

export function renderWithHooks(current, workInProgress, Component, props) {
    const children = Component(props);
    return children;
}

packages/react-reconciler/ReactFiberCommitWork.js

+ import { HostComponent, HostRoot, HostText, FunctionComponent } from "./ReactWorkTags";

export function commitMutationEffectsOnFiber(finishedWork, root) {
  switch (finishedWork.tag) {
+    case FunctionComponent:
    case HostRoot:
    case HostComponent:
    case HostText: {
      recursivelyTraverseMutationEffects(root, finishedWork);
      commitReconciliationEffects(finishedWork);
      break;
    }
  }
}