实现极简react解析
代码来自以下博客，我对代码进行学习后添加了些简单的注视：
// 创建普通DOM元素JS对象
function createElement(type, props, ...children) {
return {
type,
props: {
...props,
children: children.map((child) =>
typeof child === 'object' ? child : createTextElement(child)
),
},
};
}
// 创建文本元素JS对象
function createTextElement(text) {
return {
type: 'TEXT_ELEMENT',
props: {
nodeValue: text,
children: [],
},
};
}
//
function createDom(fiber) {
const dom =
fiber.type == 'TEXT_ELEMENT'
? document.createTextNode('')
: document.createElement(fiber.type);
updateDom(dom, {}, fiber.props);
return dom;
}
const isEvent = (key) => key.startsWith('on');
const isProperty = (key) => key !== 'children' && !isEvent(key);
const isNew = (prev, next) => (key) => prev[key] !== next[key];
const isGone = (prev, next) => (key) => !(key in next);
function updateDom(dom, prevProps, nextProps) {
//Remove old or changed event listeners 移除旧的或者改变了的事件监听
Object.keys(prevProps)
.filter(isEvent)
.filter((key) => !(key in nextProps) || isNew(prevProps, nextProps)(key))
.forEach((name) => {
const eventType = name.toLowerCase().substring(2);
dom.removeEventListener(eventType, prevProps[name]);
});
// Remove old properties 移除不需要的属性
Object.keys(prevProps)
.filter(isProperty)
.filter(isGone(prevProps, nextProps))
.forEach((name) => {
dom[name] = '';
});
// Set new or changed properties 添加新的属性
Object.keys(nextProps)
.filter(isProperty)
.filter(isNew(prevProps, nextProps))
.forEach((name) => {
dom[name] = nextProps[name];
});
// Add event listeners 添加事件
Object.keys(nextProps)
.filter(isEvent)
.filter(isNew(prevProps, nextProps))
.forEach((name) => {
const eventType = name.toLowerCase().substring(2);
dom.addEventListener(eventType, nextProps[name]);
});
}
// work in progress fiber 更新完毕 commit 提交到真实DOM
function commitRoot() {
deletions.forEach(commitWork); // 删除DOM
commitWork(wipRoot.child); // 开始更新DOM
currentRoot = wipRoot; // 记录提交的DOM
wipRoot = null; // wipRoot置空
}
// commit
function commitWork(fiber) {
if (!fiber) {
return;
}
let domParentFiber = fiber.parent; //获取父fiber
while (!domParentFiber.dom) {
domParentFiber = domParentFiber.parent;
}
const domParent = domParentFiber.dom; //父fiber的DOM对象
if (fiber.effectTag === 'PLACEMENT' && fiber.dom != null) {
// 如果标记是 PLACEMENT 则这个DOM节点直接替换掉
domParent.appendChild(fiber.dom); // 调用DOM API替换元素
} else if (fiber.effectTag === 'UPDATE' && fiber.dom != null) {
// 如果是 UPDATE 那么元素的 tag 类型相同，此时需要更新DOM的属性
updateDom(fiber.dom, fiber.alternate.props, fiber.props); // 更新的时候传入currentFiber的属性 用于对比更新
} else if (fiber.effectTag === 'DELETION') {
// 如果是 DELETION ，则删除
commitDeletion(fiber, domParent);
}
commitWork(fiber.child); // 处理子元素 这里是一个DFS，深度优先搜索
commitWork(fiber.sibling); // 处理兄弟元素
}
function commitDeletion(fiber, domParent) {
if (fiber.dom) {
domParent.removeChild(fiber.dom);
} else {
commitDeletion(fiber.child, domParent); // 递归查找子元素 直到找到并删除
}
}
// 最初调用 启动react ？
function render(element, container) {
wipRoot = {
// 创建根元素的fiber对象
dom: container,
props: {
children: [element],
},
alternate: currentRoot, // alternate 指向上一次commit提交的fiber，如果是第一次启动应用，这个为空
};
deletions = [];
nextUnitOfWork = wipRoot; // 这个是最主要的作用，将wipRoot这个根fiber赋值给nextUnitOfWork，nextUnitOfWork是即将处理的一个fiber
}
let nextUnitOfWork = null; // 下一个将要处理的fiber
let currentRoot = null; // 上次commit的fiber 也就是当前页面上已经渲染的DOM对应的fiber
let wipRoot = null; // work in progress root
let deletions = null; // 需要删除的元素
// 浏览器空闲时调用 主要的驱动工作函数
function workLoop(deadline) {
let shouldYield = false;
while (nextUnitOfWork && !shouldYield) {
nextUnitOfWork = performUnitOfWork(nextUnitOfWork); // performUnitOfWork 函数处理当前fiber节点 并且 返回下一个需要处理的fiber 返回的fiber是子元素或者兄弟元素
shouldYield = deadline.timeRemaining() < 1;
}
if (!nextUnitOfWork && wipRoot) {
commitRoot(); // fiber处理完毕后commit
}
requestIdleCallback(workLoop);
}
requestIdleCallback(workLoop); // 调用 requestIdleCallback API，requestIdleCallback传入的函数在浏览器线程空闲时调用， 这里react自己实现了一个requestIdleCallback
// performUnitOfWork 函数的主要作用:
// 1.当前为当前fiber的子元素创建fiber，并且与父fiber、sibling fiber关联，进行diff标记
// 2.返回下一个需要处理的fiber
function performUnitOfWork(fiber) {
const isFunctionComponent = fiber.type instanceof Function; // 判断是否为函数组件
if (isFunctionComponent) {
updateFunctionComponent(fiber); // 函数组件进行相关调和 reconcile
} else {
updateHostComponent(fiber); // 非函数组件
}
if (fiber.child) {
// 如果当前fiber有子fiber则返回 没有则返回当前fiber的sibling 如果也没有则返回 ‘uncle’ 一直向上查找 这里是一个DFS搜索
return fiber.child;
}
let nextFiber = fiber;
while (nextFiber) {
if (nextFiber.sibling) {
// 返回sibling
return nextFiber.sibling;
}
nextFiber = nextFiber.parent; // 向上查找
}
}
let wipFiber = null;
let hookIndex = null;
function updateFunctionComponent(fiber) {
wipFiber = fiber;
hookIndex = 0;
wipFiber.hooks = [];
const children = [fiber.type(fiber.props)]; // 函数组件需要调用函数后才能得到子组件
reconcileChildren(fiber, children);
}
function useState(initial) {
const oldHook =
wipFiber.alternate &&
wipFiber.alternate.hooks &&
wipFiber.alternate.hooks[hookIndex];
// 根据有没有alternate对应的hook判断是不是初始hook
const hook = {
state: oldHook ? oldHook.state : initial,
queue: [],
};
const actions = oldHook ? oldHook.queue : [];
actions.forEach((action) => {
// 执行action 并将执行结果赋值给state
hook.state = action(hook.state);
});
const setState = (action) => {
hook.queue.push(action);
wipRoot = {
dom: currentRoot.dom,
props: currentRoot.props,
alternate: currentRoot,
};
nextUnitOfWork = wipRoot; // 调用setState时给nextUnitOfWork赋值 这样可以驱动react执行
deletions = [];
};
wipFiber.hooks.push(hook);
hookIndex++;
return [hook.state, setState];
}
function updateHostComponent(fiber) {
if (!fiber.dom) {
fiber.dom = createDom(fiber);
}
reconcileChildren(fiber, fiber.props.children);
}
// 1.当前为当前fiber的子元素创建fiber
// 2.将当前fiber和子元素fiber以及子fiber与子fiber的sibling关联
// 3.处理子fiber时与alternate以前的fiber进行对比(diff操作)，做一些标记(PLACEMENT,UPDATE,DELETION)用于处理完所有fiber后根据这些标记更新到DOM
function reconcileChildren(wipFiber, elements) {
let index = 0;
let oldFiber = wipFiber.alternate && wipFiber.alternate.child;
let prevSibling = null;
while (index < elements.length || oldFiber != null) {
const element = elements[index];
let newFiber = null;
const sameType = oldFiber && element && element.type == oldFiber.type;
if (sameType) {
// 元素类型相同 只做属性的更新
newFiber = {
type: oldFiber.type,
props: element.props,
dom: oldFiber.dom,
parent: wipFiber,
alternate: oldFiber,
effectTag: 'UPDATE',
};
}
if (element && !sameType) {
// 新增
newFiber = {
type: element.type,
props: element.props,
dom: null,
parent: wipFiber,
alternate: null,
effectTag: 'PLACEMENT',
};
}
if (oldFiber && !sameType) {
//删除
oldFiber.effectTag = 'DELETION';
deletions.push(oldFiber);
}
if (oldFiber) {
oldFiber = oldFiber.sibling; // old fiber 指向兄弟元素
}
if (index === 0) {
// 当前fiber的child只指向第一个子元素 其他的子元素的由子元素的sibling属性关联
wipFiber.child = newFiber;
} else if (element) {
prevSibling.sibling = newFiber;
}
prevSibling = newFiber; // 记录这个子元素 下一个子元素回用到
index++;
}
}
const Didact = {
createElement,
render,
useState,
};
/** @jsx Didact.createElement */
// function Counter() {
// const [state, setState] = Didact.useState(1);
// return <h1 onClick={() => setState((c) => c + 1)}>Count: {state}</h1>;
// }
// const element = <Counter />;
const container = document.getElementById('root');
Didact.render(Didact.createElement('div', {}, 'aa'), container);