react渲染流程

render
legacyRenderSubtreeIntoContainer

legacyRenderSubtreeIntoContainer(
    null,
    element,
    container,
    false, 
    callback
) {
    ...
    // 创建FiberRootNode对象
    root = container._reactRootContainer = legacyCreateRootFromDOMContainer(container, forceHydrate);
    ...
    // 创建update对象、获取context
    updateContainer(children, fiberRoot, parentComponent, callback);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

legacyCreateRootFromDOMContainer

legacyCreateRootFromDOMContainer(
    container, 
    forceHydrate
) {
    return createLegacyRoot(
        container, 
        shouldHydrate ? { hydrate: true } : undefined
    ) {
        return new ReactDOMBlockingRoot(
            container, 
            LegacyRoot, 
            options
        ) {
            createRootImpl(
                container, 
                tag, 
                options
            ) {
                 createContainer(
                    container, 
                    tag, 
                    hydrate
                ) {
                    createFiberRoot(
                        containerInfo, 
                        tag, 
                        hydrate
                    ) {
                        // 创建FiberRootNode对象
                        var root = new FiberRootNode(containerInfo, tag, hydrate);
                        // 创建rootFiber
                        var uninitializedFiber = createHostRootFiber(tag);
                        // FiberRootNode、rootFiber建立相互引用
                        root.current = uninitializedFiber;
                        uninitializedFiber.stateNode = root;
                        // 为rootFiber初始化updateQueue
                        initializeUpdateQueue(uninitializedFiber);
                        return root;
                    }
                }
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

updateContainer

updateContainer(
    element, 
    container, 
    parentComponent, 
    callback
) {
    ...
    var context = getContextForSubtree(parentComponent);
    ...
    // 创建update对象
    var update = createUpdate(eventTime, lane);
    ...
    // 获取rootFiber的updateQueue, 添加update到updateQueue.shared.pending，创建环状列表
    enqueueUpdate(current$1, update);
    // 计算生成fiber节点并更新到真实dom
    scheduleUpdateOnFiber(current$1, lane, eventTime);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

scheduleUpdateOnFiber

scheduleUpdateOnFiber(
    fiber, 
    lane, 
    eventTime
) {
    performSyncWorkOnRoot(root) {
        renderRootSync(
            root, 
            lanes
        ) {
            workLoopSync() {
                while (workInProgress !== null) {
                    performUnitOfWork(workInProgress) {
                        // 深度遍历创建fiber节点
                        // 建立fiber的关系child(子节点)、sibling(兄弟节点)、return(父节点)
                        beginWork(
                            current, 
                            workInProgress, 
                            renderLanes
                        ) {
                            // 创建fiber并标记副作用(flags)
                            ChildReconciler(
                                shouldTrackSideEffects // 是否标记副作用
                            ) {
                                // diff算法
                                reconcileChildFibers() {
                                    // 单节点diff
                                    reconcileSingleElement() {
                                        // 不能复用根据jsx创建fiber
                                        createFiberFromElement()
                                    }
                                }
                            }
                            // 判断节点是否可以复用
                            bailoutOnAlreadyFinishedWork()
                        }
                        // 处理fiber的sibling没有sibling节点则处理return节点
                        // 从触发更新的节点向上合并effectList直到rootFiber
                        completeUnitOfWork(unitOfWork) {
                            // mount阶段
                            // 创建fiber对应的dom节点
                            // 将后代dom节点插入刚创建的dom里
                            completeWork(
                                current, 
                                workInProgress, 
                                renderLanes
                            ) {
                                
                            }
                        }
                    }
                }
            }
        }
        commitRoot(root) {
            commitRootImpl(
                root, 
                renderPriorityLevel
            ) {
                commitBeforeMutationEffects() {
                    
                }
                // 遍历effect列表
                // 更新到真实dom
                commitMutationEffects() {
                    
                }
                commitLayoutEffects() {
                    
                }
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

react自定义hook→