diff --git a/src/mini-react/fiber.js b/src/mini-react/fiber.js new file mode 100644 index 0000000..7b08e34 --- /dev/null +++ b/src/mini-react/fiber.js @@ -0,0 +1,14 @@ +let nextUnitOfWork = null; +let rootFiber = null; + +// 创建 rootFiber 作为首个 nextUnitOfWork +export function createRoot(element, container) { + rootFiber = { + stateNode: container, // 记录对应的真实 dom 节点 + element: { + // 挂载 element + props: { children: [element] }, + }, + }; + nextUnitOfWork = rootFiber; +} diff --git a/src/mini-react/react-dom.js b/src/mini-react/react-dom.js index 6ea6b4b..f3244e0 100644 --- a/src/mini-react/react-dom.js +++ b/src/mini-react/react-dom.js @@ -1,6 +1,7 @@ +import { createRoot } from './fiber'; + function render(element, container) { - const dom = renderDom(element); - container.appendChild(dom); + createRoot(element, container); } // 将 React.Element 渲染为真实 dom