51 lines
1.4 KiB
JavaScript
51 lines
1.4 KiB
JavaScript
import createFiber from "../reconciler/ReactFiber";
|
||
import scheduleUpdateOnFiber from "../reconciler/ReactFiberWorkLoop";
|
||
|
||
/**
|
||
* 更新容器的方法
|
||
* @param {*} element 要挂载的 vnode 树
|
||
* @param {*} container 容器的 DOM 节点
|
||
*/
|
||
function updateContainer(element, container) {
|
||
const fiber = createFiber(element, {
|
||
// 该对象就是我的父 fiber 对象，里面会放置一些核心的属性
|
||
type: container.nodeName.toLowerCase(),
|
||
stateNode: container,
|
||
});
|
||
// console.log(fiber);
|
||
// 到目前为止，我们就创建了第一个 fiber 对象
|
||
// 但是目前仅仅只有最外层的父元素创建了对应的 fiber 对象
|
||
scheduleUpdateOnFiber(fiber);
|
||
}
|
||
|
||
class ReactDOMRoot {
|
||
constructor(container) {
|
||
// 将拿到的根 DOM 节点在内部保存一份
|
||
this._internalRoot = container;
|
||
}
|
||
/**
|
||
*
|
||
* @param {*} children 要挂载到根节点的 vnode 树
|
||
* 这里做一个讲课的约定：
|
||
* 1. 以前的虚拟DOM，我们称之为 vnode
|
||
* 2. 新的虚拟DOM，我们称之为 Fiber
|
||
*/
|
||
render(children) {
|
||
// console.log(children);
|
||
updateContainer(children, this._internalRoot);
|
||
}
|
||
}
|
||
|
||
const ReactDOM = {
|
||
/**
|
||
*
|
||
* @param {*} container 要挂载的根 DOM 节点
|
||
* @return 返回值是一个对象，该对象会有一个 render 方法
|
||
*/
|
||
createRoot(container) {
|
||
return new ReactDOMRoot(container);
|
||
},
|
||
};
|
||
|
||
export default ReactDOM;
|