Build your own React

July 25, 2023

123

我们编写的 React，称之为 Didact

Step Zero: Review

tsx

/** @jsx Didact.createElement */
/** @jsxFrag Didact.Fragment */

const element1 = <h1 title="foo">Hello</h1>;
//       |
//       v
const element2 = Didact.createElement("h1", { title: "foo" }, "Hello");
//       |
//       v
const element3: Didact.DidactElement = {
    type: "h1",
    props: {
        title: "foo",
        children: ["Hello"],
    },
};

Step I: The createElement Function

tsx

namespace Didact {
    export type DidactNode = DidactElement | Array<DidactNode> | string | number | boolean | null | undefined;
    // 简化版类型，@types/react 中写的是 Iterable<ReactNode> 而不是数组

    export interface DidactElement<P = any, T extends string = string> {
        type: T; // react 内部会使用 Symbol 作为 type
        props: P & { children?: Array<DidactElement | DidactElement[]> }; // 注意 children 的类型
        // 没有实现 key 属性 key: Key | null
    }

    // 将 Didact 对象转换为 Didact 元素
    export function createElement(
        type: string,
        props?: Record<string, any> | null,
        ...children: DidactNode[]
    ): DidactElement {
        // 注意返回值
        function nodeToElement(node: DidactNode): DidactElement | DidactElement[] {
            if (node === null) return createNullElement(); // falsy 值，不渲染
            if (Array.isArray(node)) return node.map(nodeToElement) as DidactElement[]; // 处理数组
            if (typeof node === "object") return node;
            if (typeof node === "string") return createTextElement(node);
            if (typeof node === "number") return createTextElement(String(node));
            if (Boolean(node) === false) return createNullElement(); // falsy 值，不渲染
            return createTextElement(String(node)); // 强转为字符串
        }
        return {
            type,
            props: {
                ...props,
                children: children.map(nodeToElement),
            },
        };
    }

    // 辅助函数，将字符串转换为 Didact 元素
    function createTextElement(text: string): DidactElement {
        return {
            type: "TEXT_ELEMENT",
            props: {
                /**
                 * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Node/nodeValue)
                 * 使用 nodeValue 属性方便在 render 函数中操作
                 */
                nodeValue: text,
                children: [],
            },
        };
    }

    // 辅助函数，将 falsy 值转换为 Didact 元素
    function createNullElement(): DidactElement {
        return {
            type: "NULL_ELEMENT",
            props: {
                children: [],
            },
        };
    }
}

Step II: The render Function

tsx

namespace Didact {
    export function render(element: DidactElement, container: Element) {
        // 跳过空元素
        if (element.type === "NULL_ELEMENT") return;
        // 生成 dom 节点
        const dom = element.type == "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(element.type);
        // 设置 dom 属性
        Object.keys(element.props)
            .filter((key) => key !== "children") // children 是特殊的属性，排除之！
            .forEach((name) => Reflect.set(dom, name, element.props[name]));
        // 递归渲染
        element.props.children.forEach((child) => render(child, dom));
        // 渲染进容器
        container.appendChild(dom);
    }
}

题外话：实现一个基础的 SSR 也很简单，可以参考这个简单实现

export function render(element: DidactElement) {
    if (element.type === "NULL_ELEMENT") return "";
    if (element.type === "TEXT_ELEMENT") return element.props.nodeValue;

    let left = `<${element.type}`;
    let right = `</${element.type}>`;

    Object.keys(element.props)
        .filter((key) => key !== "children")
        .forEach((name) => {
            left += ` ${name}="${element.props[name]}"`;
        });
    left += ">";

    element.props.children.forEach((child) => {
        left += render(child); 
    });

    return left + right;
}

Step III: Concurrent Mode

上面的递归实现简单易懂，但渲染函数是完全同步的
若 VDOM 很大，渲染需要阻塞主线程很长时间，导致页面卡顿

解决办法是将渲染函数的渲染过程拆分为多个更小的单元，
每个渲染都通过浏览器提供的 requestIdleCallback 函数来调度，实现每次渲染只占用主线程一小段时间

React 内部并非使用 requestIdleCallback，而是实现了 scheduler 来调度
参见：https://yieldray.fun/posts/js-prioritized-task-scheduling-api#%E9%A2%98%E5%A4%96%E8%AF%9Dreact-scheduler
React 内部通过时间切片，实现了优先级调度（用于处理渲染、事件、动画等）、中断和恢复、并发渲染（Lane 机制）、避免避免饥饿，充分占用主线程
简而言之，实际实现更为复杂，这个简单实现不会引入这些复杂性

// requestIdleCallback 定义
declare function requestIdleCallback(
    /**
     * A reference to a function that should be called in the near future, when the event loop is idle. The callback function is passed an IdleDeadline object describing the amount of time available and whether or not the callback has been run because the timeout period expired.
     */
    callback: (deadline: {
        /**
         * A Boolean whose value is true if the callback is being executed because the timeout specified when the idle callback was installed has expired.
         */
        readonly didTimeout: boolean;
        /**
         * Returns a DOMHighResTimeStamp, which is a floating-point value providing an estimate of the number of milliseconds remaining in the current idle period. If the idle period is over, the value is 0. Your callback can call this repeatedly to see if there's enough time left to do more work before returning.
         */
        timeRemaining(): DOMHighResTimeStamp;
    }) => void,
    options?: {
        /**
         * If the number of milliseconds represented by this parameter has elapsed and the callback has not already been called, then a task to execute the callback is queued in the event loop (even if doing so risks causing a negative performance impact). timeout must be a positive value or it is ignored.
         */
        timeout?: number;
    },
): number;

Step IV: Fibers

我们要构建一棵 fiber 树，每个 fiber 可作为一个工作单元来渲染

每个 fiber 只引用其父 fiber，相邻的下一个 fiber，和第一个子 fiber

FiberTree

渲染时，我们递归地：

渲染当前 fiber
渲染当前 fiber 的所有子 fiber
依次渲染当前 fiber 的兄弟 fiber

namespace Didact {
    interface Fiber extends DidactElement {
        dom: Node | null;
        parent: Fiber | null; // 父 fiber
        child: Fiber | null; // 第一个子 fiber
        sibling: Fiber | null; // 兄弟 fiber （相邻的下一个）
    }

    // 将原本的 render 方法抽离出一个用于创建 dom 节点的方法，我们用此方法生成 fiber 的 dom 属性
    function createDom(fiber: Fiber): Node | null {
        if (fiber.type === "NULL_ELEMENT") return null;
        const dom = fiber.type == "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type);
        Object.keys(fiber.props)
            .filter((key) => key !== "children")
            .forEach((name) => Reflect.set(dom, name, element.props[name]));
        return dom;
    }

    let nextUnitOfWork: Fiber | null = null; // 一个工作单元其实是一个不完整的 fiber

    function workLoop({ timeRemaining }: { timeRemaining(): DOMHighResTimeStamp }) {
        let shouldYield = false;
        while (nextUnitOfWork && !shouldYield) {
            nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
            shouldYield = timeRemaining() < 1;
        }
        //! 继续执行工作单元
        if (nextUnitOfWork) requestIdleCallback(workLoop);
    }

    export function render(element: DidactElement, container: Node) {
        // 第一个工作单元无需渲染，因为它是容器元素，而不是 Didact 元素
        // 只有 Didact 元素才需要渲染
        nextUnitOfWork = {
            dom: container,
            props: {
                children: [element],
            },
        } as Fiber; // 其余属性在渲染时生成，这里先强转一下
        //! 开始执行工作单元
        requestIdleCallback(workLoop);
    }

    function performUnitOfWork(fiber: Fiber): Fiber | null {
        if (!fiber.dom) {
            // 如果还没有渲染，说明是 Didact 元素，执行渲染
            // 只有容器元素不需要渲染，也就是说只有第一个工作单元不会发生渲染，之后的工作单元都会发生渲染
            fiber.dom = createDom(fiber);
            // 请注意每个工作单元仅调用一次 createDom 函数，也就是仅执行一次渲染
        }
        if (fiber.parent) {
            // 父 fiber 的 dom 必然是已渲染的
            if (fiber.dom) fiber.parent.dom!.appendChild(fiber.dom);
            // 将当前 fiber 渲染进父 fiber （跳过空节点）
        }
        // 下面生成当前 fiber 的 child 和 sibling 属性（部分构建 fiber 树）
        let prevSibling: Fiber | null = null; //
        const elements: DidactElement[] = fiber.props.children.flat(1); // 对于当前 fiber 的所有子元素（flat 一层）
        let index = 0;
        while (index < elements.length) {
            const element: DidactElement = elements[index];
            const newFiber: Fiber = {
                type: element.type,
                props: element.props,
                parent: fiber,
                dom: null,
                child: null,
                sibling: null,
            }; // 将当前 fiber 的每一个子元素转换为子 fiber
            if (index === 0) {
                fiber.child = newFiber; // 第一个子 fiber，通过当前 fiber 的 child 属性引用
            } else {
                prevSibling!.sibling = newFiber; // 否则，将前一个子 fiber 的兄弟（相邻的下一个） fiber 设置为当前子 fiber
            }
            prevSibling = newFiber; // 将前一个 fiber 的引用更新为当前子 fiber
            index++;
        }

        // 注：一看到 return 就表示发生了递归！

        // 下面依次渲染子 fiber （递归）
        if (fiber.child) {
            // 如果当前 fiber 有子 fiber，令下一个工作单元渲染之
            return fiber.child;
        }
        // 下面依次渲染兄弟 fiber （递归）
        let nextFiber = fiber;
        while (nextFiber) {
            if (nextFiber.sibling) {
                // 如果有兄弟 fiber，就依次渲染
                return nextFiber.sibling;
            } else {
                // 否则，回到父 fiber
                nextFiber = nextFiber.parent!;
                // 继续渲染父 fiber 的兄弟节点
            }
        }
        // 渲染完了（递归结束）
        return null;
    }
}

Step V: Render and Commit Phases

上面的渲染存在问题：每次 performUnitOfWork 函数渲染 fiber 就将其放入父节点（即： parent.appendChild(child)）
但浏览器可能在渲染某一个子节点时打断，导致浏览器渲染了一个未完成的 fiber 树，这就造成 UI 闪烁

解决办法是先将 appendChild 操作收集起来，最后一次性应用到真实的 DOM 上

1.移除 performUnitOfWork 函数中的 dom 添加操作
2.创建一个 wipRoot 引用，指向当前渲染中的根 fiber
3.待整棵 fiber 树渲染完毕后，再执行 dom 的添加操作（可以很方便的通过递归 wipRoot 树来实现）

namespace Didact {
    let nextUnitOfWork: Fiber | null = null; // 一个工作单元其实是一个不完整的 fiber

    function workLoop({ timeRemaining }: IdleDeadline) {
        let shouldYield = false;
        while (nextUnitOfWork && !shouldYield) {
            nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
            shouldYield = timeRemaining() < 1;
        }
        if (!nextUnitOfWork && wipRoot) {
            // 没有需要渲染的工作，说明渲染完毕，可以添加进 dom 了
            commitRoot();
        } else {
            //! 否则，继续执行工作单元
            requestIdleCallback(workLoop);
        }
    }

    let wipRoot: Fiber | null = null; // 根 fiber，需等待其完全渲染完

    export function render(element: DidactElement, container: Node) {
        wipRoot = {
            dom: container,
            props: {
                children: [element],
            },
        } as Fiber;

        nextUnitOfWork = wipRoot;
    }

    function performUnitOfWork(fiber: Fiber): Fiber | null {
        if (!fiber.dom) {
            fiber.dom = createDom(fiber);
        }

        //if (fiber.parent) {
        //    if (fiber.dom) fiber.parent.dom!.appendChild(fiber.dom);
        //}

        //
        // ... ...
        //
    }

    function commitRoot() {
        // 只有 wipRoot 赋值后才会调用 commitRoot() 函数
        commitWork(wipRoot!.child); // 递归函数
        wipRoot = null; // 添加完了，置空
    }

    function commitWork(fiber: Fiber | null) {
        if (!fiber) return;
        // 传入 commitWork() 函数的 fiber 不是根 fiber，故必存在 parent 引用
        const domParent = fiber.parent!.dom!;
        // 递归地将 fiber 的 dom 添加进父 dom 节点
        if (fiber.dom) domParent.appendChild(fiber.dom);
        commitWork(fiber.child);
        commitWork(fiber.sibling);
    }
}

Step VI: Reconciliation

上面只处理了创建元素，还需要处理更新和移除元素

1.为 Fiber 添加 alternate 属性，指向上一次渲染的对应 fiber，用于 diff 操作
2.添加 effectTag 属性，用于标识 commit 过程需要执行的操作类型（称为 reconcile）

namespace Didact {
    interface Fiber extends DidactElement {
        dom: Node | null;
        parent: Fiber | null;
        child: Fiber | null;
        sibling: Fiber | null;
        alternate: Fiber | null; // 用于 diff
        effectTag: "UPDATE" | "PLACEMENT" | "DELETION"; // 用于 commit
    }

    function createDom(fiber: Fiber): Node | null {
        if (fiber.type === "NULL_ELEMENT") return null;
        const dom = fiber.type == "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(fiber.type);
        updateDom(dom, {}, fiber.props);
        return dom;
    }

    const isEvent = (key: string) => key.startsWith("on");
    const isProperty = (key: string) => key !== "children" && !isEvent(key);
    const isNew = (prev: Record<keyof any, any>, next: Record<keyof any, any>) => (key: keyof any) =>
        prev[key] !== next[key];
    const isGone = (prev: Record<keyof any, any>, next: Record<keyof any, any>) => (key: keyof any) => !(key in next);

    function updateDom(dom: Node, prevProps: Record<keyof any, any>, nextProps: Record<keyof any, any>) {
        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]);
            });

        Object.keys(nextProps)
            .filter(isEvent)
            // 选取所有新的监听器
            .filter(isNew(prevProps, nextProps))
            // 添加之
            .forEach((name) => {
                const eventType = name.toLowerCase().substring(2);
                dom.addEventListener(eventType, nextProps[name]);
            });

        Object.keys(prevProps)
            // 选取所有旧的属性
            .filter(isProperty)
            // 若该属性不需要了
            .filter(isGone(prevProps, nextProps))
            // 移除之
            .forEach((name) => {
                Reflect.set(dom, name, "");
            });

        Object.keys(nextProps)
            .filter(isProperty)
            // 选取所有新的属性
            .filter(isNew(prevProps, nextProps))
            // 添加之
            .forEach((name) => {
                Reflect.set(dom, name, nextProps[name]);
            });
    }

    function commitRoot() {
        // 对 dom 的更改操作都移入 commit 中
        deletions!.forEach(commitWork);
        commitWork(wipRoot!.child);
        currentRoot = wipRoot;
        wipRoot = null;
    }

    function commitWork(fiber: Fiber | null) {
        if (!fiber) {
            // 递归终止条件
            return;
        }

        const domParent = fiber.parent!.dom!;
        if (fiber.effectTag === "PLACEMENT" && fiber.dom != null) {
            domParent.appendChild(fiber.dom);
        } else if (fiber.effectTag === "DELETION" && fiber.dom != null) {
            domParent.removeChild(fiber.dom);
        } else if (fiber.effectTag === "UPDATE" && fiber.dom != null) {
            updateDom(fiber.dom, fiber.alternate!.props, fiber.props);
        }

        commitWork(fiber.child);
        commitWork(fiber.sibling);
    }

    function render(element: DidactElement, container: Node) {
        wipRoot = {
            dom: container,
            props: {
                children: [element],
            },
            alternate: currentRoot,
        } as Fiber;
        deletions = [];
        nextUnitOfWork = wipRoot;
        requestIdleCallback(workLoop);
    }

    let nextUnitOfWork: Fiber | null = null;
    let currentRoot: Fiber | null = null;
    let wipRoot: Fiber | null = null;
    let deletions: Fiber[] | null = null;

    function workLoop(deadline: IdleDeadline) {
        let shouldYield = false;
        while (nextUnitOfWork && !shouldYield) {
            nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
            shouldYield = deadline.timeRemaining() < 1;
        }
        if (!nextUnitOfWork && wipRoot) {
            // 渲染完整棵树
            commitRoot();
        } else {
            requestIdleCallback(workLoop);
        }
    }

    function performUnitOfWork(fiber: Fiber) {
        if (!fiber.dom) {
            fiber.dom = createDom(fiber);
        }

        const elements = fiber.props.children;
        reconcileChildren(fiber, elements); // 调整所有子 fiber

        if (fiber.child) {
            return fiber.child;
        }
        let nextFiber = fiber;
        while (nextFiber) {
            if (nextFiber.sibling) {
                return nextFiber.sibling;
            } else {
                nextFiber = nextFiber.parent!;
            }
        }
        return null;
    }

    function reconcileChildren(wipFiber: Fiber, elems: Array<DidactElement | DidactElement[]>) {
        // 重要：flat 一层
        const elements: DidactElement[] = elems.flat(1);
        // wipFiber 是 elements 的直接父节点
        let index = 0;
        // 与上一次渲染的相同位置做比较
        let oldFiber: Fiber | null = wipFiber.alternate?.child;
        // 当前子 fiber 的上一个兄弟 fiber
        let prevSibling: Fiber | null = null;

        while (index < elements.length || oldFiber != null) {
            const element = elements[index];

            let newFiber: Fiber | null = null;
            const sameType = oldFiber && element && element.type === oldFiber.type;

            // 通过 effectTag 属性标记，待到 commitWork 函数中执行相应操作
            if (sameType) {
                newFiber = {
                    type: oldFiber!.type,
                    props: element.props,
                    dom: oldFiber!.dom, // 无需重新创建 dom
                    parent: wipFiber,
                    alternate: oldFiber,
                    effectTag: "UPDATE",
                    child: null,
                    sibling: null,
                };
            }
            if (element && !sameType) {
                newFiber = {
                    type: element.type,
                    props: element.props,
                    dom: null, // 需要重新创建 dom
                    parent: wipFiber,
                    alternate: null,
                    effectTag: "PLACEMENT",
                    child: null,
                    sibling: null,
                };
            }
            if (oldFiber && !sameType) {
                oldFiber.effectTag = "DELETION";
                deletions!.push(oldFiber); // 添加到删除列表
            }

            if (oldFiber) {
                // 继续比较
                oldFiber = oldFiber.sibling;
            }

            if (index === 0) {
                wipFiber.child = newFiber;
            } else if (element) {
                // 注：if (element) 没必要
                prevSibling!.sibling = newFiber;
            }

            prevSibling = newFiber;
            index++;
        }
    }
}

Step VII: Function Components

函数组件的 type 属性指向一个返回 DidactElement 的函数，其 children 属性通过调用该函数得到
函数组件的 fiber 是没有 DOM 属性的，那么在移除函数组件的子节点时，就需要寻找到函数组件的上层 DOM 才能完成移除

tsx

function App(props: { name: string; children?: DidactNode }) {
    return (
        <article>
            <h1>Hello, {props.name}</h1>
            <div>{props.children}</div>
        </article>
    );
}
const element = <App name="foo" />;
//               ^     ^
//               |     |
//              type  props

namespace Didact {
    type FC<P = any> = (props: P) => DidactElement;

    interface DidactElement<P = any, T extends string | FC<P> = string | FC<P>> {
        type: T;
        props: P;
    }

    interface Fiber<T extends string | FC = string | FC> extends DidactElement<any, T> {
        dom: Node | null;
        parent: Fiber | null;
        child: Fiber | null;
        sibling: Fiber | null;
        alternate: Fiber | null;
        effectTag: "UPDATE" | "PLACEMENT" | "DELETION";
    }

    type DidactFragment = Array<DidactNode>;

    // Fragment 函数的实现非常简单，它只是一个特殊的函数组件
    function Fragment(props: { children?: DidactNode[] }): DidactFragment {
        return props.children || [];
    }

    function createDom(fiber: Fiber<string>): Node | null {
        // ... ...
    }

    function updateDom(dom: Node, prevProps: Record<keyof any, any>, nextProps: Record<keyof any, any>) {
        // ... ...
    }

    function commitRoot() {
        deletions!.forEach(commitWork);
        commitWork(wipRoot!.child);
        currentRoot = wipRoot;
        wipRoot = null;
    }

    function commitWork(fiber: Fiber | null) {
        if (!fiber) {
            // 递归终止条件
            return;
        }
        // commitWork 传入的 fiber 不是根 fiber，必有 parent 属性
        let domParentFiber: Fiber = fiber.parent!;
        while (!domParentFiber.dom) {
            // 如果当前 fiber 没有 dom 属性，说明这个 fiber 是函数组件的 fiber
            domParentFiber = domParentFiber.parent!;
            // 由于上一级也可能是函数组件 fiber，一直向上寻找，直至非函数组件 fiber
        }
        const domParent = domParentFiber.dom;

        if (fiber.effectTag === "PLACEMENT" && fiber.dom != null) {
            domParent.appendChild(fiber.dom);
        } else if (fiber.effectTag === "DELETION" && fiber.dom != null) {
            commitDeletion(fiber, domParent); //? 处理移除
        } else if (fiber.effectTag === "UPDATE" && fiber.dom != null) {
            updateDom(fiber.dom, fiber.alternate!.props, fiber.props);
        }
        // 继续递归
        commitWork(fiber.child);
        commitWork(fiber.sibling);
    }

    function commitDeletion(fiber: Fiber, domParent: Node) {
        if (fiber.dom) {
            domParent.removeChild(fiber.dom);
        } else {
            // 注：这里函数组件必有子节点
            commitDeletion(fiber.child!, domParent);
        }
    }

    function render(element: DidactElement, container: Node) {
        // ... ...
    }

    function workLoop(deadline: IdleDeadline) {
        // ... ...
    }

    function performUnitOfWork(fiber: Fiber) {
        if (fiber.type instanceof Function) {
            // 函数组件，特殊处理
            updateFunctionComponent(fiber as Fiber<FC>);
        } else {
            // 非函数组件
            updateHostComponent(fiber as Fiber<string>);
        }

        if (fiber.child) {
            return fiber.child;
        }
        let nextFiber = fiber;
        while (nextFiber) {
            if (nextFiber.sibling) {
                return nextFiber.sibling;
            } else {
                nextFiber = nextFiber.parent!;
            }
        }
        return null;
    }

    function updateFunctionComponent(fiber: Fiber<FC>) {
        // 函数组件的 children 通过调用得到
        //@ts-ignore 处理 Fragment 函数
        const children = fiber.type === Fragment ? fiber.type(fiber.props) : [fiber.type(fiber.props)];
        reconcileChildren(fiber, children);
    }

    function updateHostComponent(fiber: Fiber<string>) {
        if (!fiber.dom) {
            fiber.dom = createDom(fiber);
        }
        reconcileChildren(fiber, fiber.props.children);
    }

    function reconcileChildren(wipFiber: Fiber, elems: Array<DidactElement | DidactElement[]>) {
        // ... ...
    }
}

Step VIII: Hooks

namespace Didact {
    interface Fiber<T extends string | FC = string | FC> extends DidactElement<any, T> {
        dom: Node | null;
        parent: Fiber | null;
        child: Fiber | null;
        sibling: Fiber | null;
        alternate: Fiber | null;
        effectTag: "UPDATE" | "PLACEMENT" | "DELETION";
        // hookIndex 用于索引 hooks
        hooks?: Array<{
            state: any;
            queue: Array<(prevState: any) => any>;
        }>;
    }

    let wipFiber: Fiber | null = null;
    let hookIndex: number | null = null;

    function updateFunctionComponent(fiber: Fiber<FC>) {
        wipFiber = fiber;
        // 函数组件添加 hooks 属性
        wipFiber.hooks = [];
        // 全局索引置 0
        hookIndex = 0;
        // 函数组件内部可以调用 useState()
        //@ts-ignore 处理 Fragment 函数
        const children = fiber.type === Fragment ? fiber.type(fiber.props) : [fiber.type(fiber.props)];
        reconcileChildren(fiber, children);
    }

    type Action<T> = (prevState: T) => T;

    // useState 函数，添加 hook 到 fiber 的 hooks 数组
    // setState 函数，添加 变更函数 到 hook 的 queue 数组
    export function useState<T = any>(initialState: T): [state: T, setState: Action<T>] {
        // 注：useState 被 updateFunctionComponent 间接调用
        // wipFiber 必是一个函数组件的 fiber

        // oldHook 是上一次渲染的对应 hook （第一次渲染时没有）
        const oldHook = wipFiber!.alternate?.hooks?.[hookIndex!];

        const hook = {
            state: oldHook ? oldHook.state : initialState,
            queue: [] as Array<Action<T>>,
        };

        // 依次执行上一次 fiber 的 hooks，得到上一次的最终 state
        const actions = oldHook ? oldHook.queue : [];
        actions.forEach((action: Action<T>) => {
            hook.state = action(hook.state);
        });

        // 调用 setState 会导致调用 performUnitOfWork 然后 updateFunctionComponent
        const setState = (action: Action<T>) => {
            hook.queue.push(action); // 函数组件可多次调用 setState
            wipRoot = {
                dom: currentRoot!.dom,
                props: currentRoot!.props,
                alternate: currentRoot!,
            } as Fiber;
            // 调用 setState 导致重渲染，更新这些全局变量（调整工作单元，重新从根 fiber 渲染）
            nextUnitOfWork = wipRoot;
            deletions = [];
            //! 执行工作单元
            requestIdleCallback(workLoop);
        };

        wipFiber!.hooks!.push(hook);
        hookIndex!++; // 渲染函数组件时，重置索引
        return [hook.state, setState];
    }

    function updateHostComponent(fiber: Fiber<string>) {
        if (!fiber.dom) {
            fiber.dom = createDom(fiber);
        }
        reconcileChildren(fiber, fiber.props.children);
    }

    function reconcileChildren(wipFiber: Fiber, elems: Array<DidactElement | DidactElement[]>) {
        // ... ...
    }
}

Extra: useEffect

// useEffect 函数，添加 effect hook 到 fiber 的 hooks 数组
export function useEffect(create: (() => void) | void, deps?: any[]) {
    // 注：useEffect 被 updateFunctionComponent 间接调用
    // wipFiber 必是一个函数组件的 fiber

    // oldHook 是上一次渲染的对应 hook （第一次渲染时没有）
    const oldHook = wipFiber!.alternate?.hooks?.[hookIndex!];

    const hasDepsChanged = oldHook ? !deps || !deps.every((dep, i) => Object.is(dep, oldHook.deps[i])) : true;

    const hook = {
        tag: "useEffect",
        create: hasDepsChanged ? create : oldHook?.create,
        destroy: hasDepsChanged ? undefined : oldHook?.destroy,
        deps: hasDepsChanged ? deps : oldHook?.deps,
    };

    wipFiber!.hooks!.push(hook);
    hookIndex!++; // 渲染函数组件时，重置索引
}

function commitWork(fiber: Fiber | null) {
    // 执行函数组件的 effect
    fiber?.hooks
        ?.filter((hook) => hook?.tag === "useEffect")
        .forEach((hook) => {
            // 执行 cleanup 函数
            hook.destroy?.();
            // 执行 effect 函数
            hook.destroy = hook.create();
        });
}

function commitDeletion(fiber: Fiber, domParent: Node) {
    if (fiber.dom) {
        domParent.removeChild(fiber.dom);
    } else {
        // 注：这里函数组件必有子节点
        commitDeletion(fiber.child!, domParent);
    }
    // 当组件被卸载时，执行 cleanup 函数
    fiber.hooks?.filter((hook) => hook?.tag === "useEffect").forEach((hook) => hook.destroy()); 
}

Extra: useLayoutEffect

这里把上一步 commitWork 的更改恢复

export function useLayoutEffect(create: () => void | (() => void), deps?: any[]) {
    const oldHook = wipFiber!.alternate?.hooks?.[hookIndex!];

    const hasDepsChanged = oldHook ? !deps || !deps.every((dep, i) => Object.is(dep, oldHook.deps[i])) : true;

    const hook = {
        tag: "useLayoutEffect", 
        create: hasDepsChanged ? create : oldHook?.create,
        destroy: hasDepsChanged ? undefined : oldHook?.destroy,
        deps: hasDepsChanged ? deps : oldHook?.deps,
    };

    wipFiber!.hooks!.push(hook);
    hookIndex!++;
}

function commitRoot() {
    // 对 dom 的更改操作都移入 commit 中
    deletions!.forEach(commitDeletion);
    commitWork(wipRoot!.child);
    // 在所有 DOM 更改完成后，同步执行 layout effects
    commitLayoutEffects(wipRoot);
    currentRoot = wipRoot;
    wipRoot = null;
    // 在所有 DOM 更改和 layout effects 执行完成后，异步执行 effects
    requestAnimationFrame(() => commitMutationEffects(currentRoot));
}

function commitDeletion(fiber: Fiber, domParent: Node) {
    if (fiber.dom) {
        domParent.removeChild(fiber.dom);
    } else {
        // 注：这里函数组件必有子节点
        commitDeletion(fiber.child!, domParent);
    }
    // 当组件被卸载时，执行 cleanup 函数
    fiber.hooks
        ?.filter((hook) => hook?.tag === "useLayoutEffect" || hook?.tag === "useEffect") 
        .forEach((hook) => hook.destroy?.());
}

// 同步执行 layout effects
function commitLayoutEffects(fiber: Fiber | null) {
    if (!fiber) return;

    // 执行函数组件的 layout effect
    fiber.hooks
        ?.filter((hook) => hook?.tag === "useLayoutEffect")
        .forEach((hook) => {
            // 执行 cleanup 函数
            hook.destroy?.();
            // 执行 effect 函数
            hook.destroy = hook.create();
        });

    // 递归处理子节点和兄弟节点
    commitLayoutEffects(fiber.child);
    commitLayoutEffects(fiber.sibling);
}

// 异步执行 effects
function commitMutationEffects(fiber: Fiber | null) {
    if (!fiber) return;

    // 执行函数组件的 effect
    fiber.hooks
        ?.filter((hook) => hook?.tag === "useEffect")
        .forEach((hook) => {
            // 执行 cleanup 函数
            hook.destroy?.();
            // 执行 effect 函数
            hook.destroy = hook.create();
        });

    // 递归处理子节点和兄弟节点
    commitMutationEffects(fiber.child);
    commitMutationEffects(fiber.sibling);
}

The End

←Back to home

This work is licensed under CC BY-NC-SA 4.0

NickName

E-Mail

Website

1 Comments

Latest
Oldest
Hottest

匿名2024-12-06

神！

YieldRay

Build your own React

Preview: