Buzz-React

简介

主流程

渲染主流程

Hooks 实现

useState

/**
 * 1. 为当前 hook 设置索引位置,新增or使用上一次 hook state
 * 2. 回调执行后更新 fiber 数,让 schdule 更新数
 * @param {any} initialState 
 * @returns 
 */
const useState = (initialState) => {
 const oldHook =
 wipFiber.alternate &&
 wipFiber.alternate.hooks &&
 wipFiber.alternate.hooks[hookIndex];
 const hook = {
 state: oldHook ? oldHook.state : initialState,
 queue: []
 };
 const actions = oldHook ? oldHook.queue : [];
 actions.forEach((action) => {
 hook.state = action(hook.state);
 });
 const setState = (actionCallback) => {
 const action = typeof actionCallback !== 'function' ? () => actionCallback : actionCallback;
 hook.queue.push(action);
 wipRoot = {
 dom: currentRoot.dom,
 props: currentRoot.props,
 alternate: currentRoot
 };
 nextUnitOfWork = wipRoot;
 deletions = [];
 };
 wipFiber.hooks.push(hook);
 hookIndex++;
 return [hook.state, setState];
};

useRef

const useRef = (initialValue) => {
 const oldHook = wipFiber?.alternate?.hooks?.[hookIndex];
 const ref = { current: initialValue };
 const hook = {
 state: oldHook?.state || ref
 };
 wipFiber.hooks.push(hook);
 hookIndex ++;
 return ref;
};
const updateHostComponent = (fiber) => {
 if (!fiber.dom) {
 fiber.dom = createDOM(fiber);
 
 if (fiber?.props?.ref) {
 fiber.props.ref.current = fiber.dom;
 }
 }
 reconcileChildren(fiber, fiber.props.children);
};

useEffect

function useEffect(effect, deps) {
 const oldHook = wipFiber?.alternate?.hooks?.[hookIndex];
 const hasChanged = hasDepsChanged(oldHook?.deps ?? undefined, deps);
 const hook = {
 tag: "effect",
 effect: hasChanged ? effect : null,
 cancel: hasChanged && oldHook?.cancel,
 deps,
 };
 wipFiber.hooks.push(hook);
 hookIndex++;
}
// commitWork 阶段需要做DOM的回调
......
if (fiber.effectTag === "PLACEMENT") {
 if (dom != null) {
 domParent.appendChild(dom);
 }
 runEffects(fiber);
} else if (fiber.effectTag === "UPDATE") {
 cancelEffects(fiber);
 if (fiber.dom !== null) {
 updateDom(dom, fiber.alternate.props, fiber.props);
 }
 runEffects(fiber);
} else if (fiber.effectTag === "DELETION") {
 cancelEffects(fiber);
 commitDeletion(fiber, domParent);
 return;
}
......