1
currentFiber.alternate === workInProgressFiber
2
workInProgressFiber.alternate === currentFiber

1
// 执行一个工作单元
2
function performUnitOfWork(fiber) {
3
    // 如果没有 DOM 节点，为当前 Fiber 创建 DOM 节点
4
    if (!fiber.dom) {
5
        fiber.dom = createDom(fiber);
6
    }
7
    //确保每个 Fiber 节点都在内存中有一个对应的 DOM 节点准备好，以便后续在提交阶段更新到实际的 DOM 树中
8

9
    // 创建子节点的 Fiber
10
    // const vdom = React.createElement('div', { id: 1 }, React.createElement('span', null, '帝师'));
11
    // 子节点在children中
12
    const elements = fiber.props.children;
13
    reconcileChildren(fiber, elements);
14

15
    // 返回下一个工作单元（child, sibling, or parent）
16
    if (fiber.child) {
17
        return fiber.child;
18
    }
19

20
    let nextFiber = fiber;
21
    while (nextFiber) {
22
        if (nextFiber.sibling) {
23
            return nextFiber.sibling;
24
        }
25
        nextFiber = nextFiber.parent;
26
    }
27
    return null;
28
}

1
// Diff 算法: 将子节点与之前的 Fiber 树进行比较
2
function reconcileChildren(wipFiber, elements) {
3
    let index = 0;//
4
    let oldFiber = wipFiber.alternate && wipFiber.alternate.child; // 旧的 Fiber 树
5
    let prevSibling = null;
6

7
    while (index < elements.length || oldFiber != null) {
8
        const element = elements[index];
9
        let newFiber = null;
10

11
        // 比较旧 Fiber 和新元素
12
        const sameType = oldFiber && element && element.type === oldFiber.type
13

14
        //如果是同类型的节点，复用
15
        if (sameType) {
16
            newFiber = {
17
                type: oldFiber.type,
18
                props: element.props,
19
                dom: oldFiber.dom,
20
                parent: wipFiber,
21
                alternate: oldFiber,
22
                effectTag: 'UPDATE',
23
            };
24

25
        }
26

27
        //如果新节点存在，但类型不同，新增fiber节点
28
        if (element && !sameType) {
29
            newFiber = createFiber(element, wipFiber);
30
            newFiber.effectTag = 'PLACEMENT';
31
        }
32

33
        //如果旧节点存在，但新节点不存在，删除旧节点
34
        if (oldFiber && !sameType) {
35
            oldFiber.effectTag = 'DELETION';
36
            deletions.push(oldFiber);
37
        }
38

39
        //移动旧fiber指针到下一个兄弟节点
40
        if (oldFiber) {
41
            oldFiber = oldFiber.sibling;
42
        }
43

44
        // 将新fiber节点插入到DOM树中
45
        if (index === 0) {
46
            //将第一个子节点设置为父节点的子节点
47
            wipFiber.child = newFiber;
48
        } else if (element) {
49
            //将后续子节点作为前一个兄弟节点的兄弟
50
            prevSibling.sibling = newFiber;
51
        }
52

53
        //更新兄弟节点
54
        prevSibling = newFiber;
55
        index++;
56
    }
57
}