React16源码: React中的beginWork的源码实现

作者：从前慢现在也慢 | 2024-02-07 14:06:40

踩

beginWork

1 ）概述

在 renderRoot 之后，要对我们的 Fiber 树每一个节点进行对应的更新
更新节点的一个入口方法，就是 beginWork
这个入口方法会有帮助我们去优化整棵树的更新过程
- react 它的节点其实是非常多的，如果每一次子节点的一个更新
- 就需要每一个节点都执行一遍更新的话，它整体的性能肯定会不好，而且是没有必要的
- 我们一个子节点的更新，可能不会影响到它的兄弟节点的更新
- 所以这部分肯定是要优化的
具体它是如何进行优化的，如下
- 首先，要判断组件的更新是否可以优化
- 然后要根据节点的类型分发进行处理，每一个节点它的更新方式会不一样
- 最后是要根据 expirationTime 等信息判断这个节点的更新是否可以跳过

2 ）源码

在 renderRoot 中，它里面调用一个方法叫做 workLoop
在 workLoop 中调用的一个方法叫做 performUnitOfWork
而 beginWork 方法就在 performUnitOfWork 中调用
beginWork 就是执行对整棵树的每一个节点进行更新的一个操作

beginWork 来自于

import {beginWork} from './ReactFiberBeginWork';
1

定位到 packages/react-reconciler/src/ReactFiberBeginWork.js
整个文件 export 出去的只有 beginWork 方法

function beginWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderExpirationTime: ExpirationTime,
): Fiber | null {
  // 读取了 workInProgress.expirationTime 这个值，这个 expirationTime 是节点上的 expirationTime
  // 函数第三个参数 renderExpirationTime 是 nextExpirationTimeToWorkOn 和 下面这个 expirationTime 有区别
  const updateExpirationTime = workInProgress.expirationTime;
  // 在 ReactDOM.render 第一次渲染时，第一个节点 current 是有值的, 接下去的节点都是没有的
  // 因为我们操作都是在 workInProgress 上操作的
  // 所以，workInProgress 创建的 child 节点也是一个 workInProgress 而不是 current
  // performUnitOfWork 接收的就是 workInProgress
  if (current !== null) {
    const oldProps = current.memoizedProps;
    const newProps = workInProgress.pendingProps;
    // 下面 renderExpirationTime 标志优先级最大都到哪个点，如果节点上的 expirationTime 比 renderExpirationTime 小
    // 说明节点上有优先级更高的任务，在这次渲染里是会执行的，反之，则不需要进行渲染，这个节点可以跳过
    // (updateExpirationTime === NoWork || updateExpirationTime > renderExpirationTime) 代表没有更新 或 有更新，但是优先级不高
    // hasLegacyContextChanged 属 context 相关api, childContextType 先跳过
    // oldProps === newProps 表示 props 一样
    if (
      oldProps === newProps &&
      !hasLegacyContextChanged() &&
      (updateExpirationTime === NoWork ||
        updateExpirationTime > renderExpirationTime)
    ) {
      // This fiber does not have any pending work. Bailout without entering
      // the begin phase. There's still some bookkeeping we that needs to be done
      // in this optimized path, mostly pushing stuff onto the stack.
      // switch 先跳过
      switch (workInProgress.tag) {
        case HostRoot:
          pushHostRootContext(workInProgress);
          resetHydrationState();
          break;
        case HostComponent:
          pushHostContext(workInProgress);
          break;
        case ClassComponent: {
          const Component = workInProgress.type;
          if (isLegacyContextProvider(Component)) {
            pushLegacyContextProvider(workInProgress);
          }
          break;
        }
        case HostPortal:
          pushHostContainer(
            workInProgress,
            workInProgress.stateNode.containerInfo,
          );
          break;
        case ContextProvider: {
          const newValue = workInProgress.memoizedProps.value;
          pushProvider(workInProgress, newValue);
          break;
        }
        case Profiler:
          if (enableProfilerTimer) {
            workInProgress.effectTag |= Update;
          }
          break;
        case SuspenseComponent: {
          const state: SuspenseState | null = workInProgress.memoizedState;
          const didTimeout = state !== null && state.didTimeout;
          if (didTimeout) {
            // If this boundary is currently timed out, we need to decide
            // whether to retry the primary children, or to skip over it and
            // go straight to the fallback. Check the priority of the primary
            // child fragment.
            const primaryChildFragment: Fiber = (workInProgress.child: any);
            const primaryChildExpirationTime =
              primaryChildFragment.childExpirationTime;
            if (
              primaryChildExpirationTime !== NoWork &&
              primaryChildExpirationTime <= renderExpirationTime
            ) {
              // The primary children have pending work. Use the normal path
              // to attempt to render the primary children again.
              return updateSuspenseComponent(
                current,
                workInProgress,
                renderExpirationTime,
              );
            } else {
              // The primary children do not have pending work with sufficient
              // priority. Bailout.
              const child = bailoutOnAlreadyFinishedWork(
                current,
                workInProgress,
                renderExpirationTime,
              );
              if (child !== null) {
                // The fallback children have pending work. Skip over the
                // primary children and work on the fallback.
                return child.sibling;
              } else {
                return null;
              }
            }
          }
          break;
        }
      }
      // 这个方法跳过该节点与其所有子节点的更新
      return bailoutOnAlreadyFinishedWork(
        current,
        workInProgress,
        renderExpirationTime,
      );
    }
  }
  
  // Before entering the begin phase, clear the expiration time.
  workInProgress.expirationTime = NoWork;
  // 如果节点有更新，通过节点的 tag，执行不同的方法，进行组件的更新
  switch (workInProgress.tag) {
    case IndeterminateComponent: {
      const elementType = workInProgress.elementType;
      return mountIndeterminateComponent(
        current,
        workInProgress,
        elementType,
        renderExpirationTime,
      );
    }
    case LazyComponent: {
      const elementType = workInProgress.elementType;
      return mountLazyComponent(
        current,
        workInProgress,
        elementType,
        updateExpirationTime,
        renderExpirationTime,
      );
    }
    case FunctionComponent: {
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultProps(Component, unresolvedProps);
      return updateFunctionComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderExpirationTime,
      );
    }
    case ClassComponent: {
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultProps(Component, unresolvedProps);
      return updateClassComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderExpirationTime,
      );
    }
    case HostRoot:
      return updateHostRoot(current, workInProgress, renderExpirationTime);
    case HostComponent:
      return updateHostComponent(current, workInProgress, renderExpirationTime);
    case HostText:
      return updateHostText(current, workInProgress);
    case SuspenseComponent:
      return updateSuspenseComponent(
        current,
        workInProgress,
        renderExpirationTime,
      );
    case HostPortal:
      return updatePortalComponent(
        current,
        workInProgress,
        renderExpirationTime,
      );
    case ForwardRef: {
      const type = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        workInProgress.elementType === type
          ? unresolvedProps
          : resolveDefaultProps(type, unresolvedProps);
      return updateForwardRef(
        current,
        workInProgress,
        type,
        resolvedProps,
        renderExpirationTime,
      );
    }
    case Fragment:
      return updateFragment(current, workInProgress, renderExpirationTime);
    case Mode:
      return updateMode(current, workInProgress, renderExpirationTime);
    case Profiler:
      return updateProfiler(current, workInProgress, renderExpirationTime);
    case ContextProvider:
      return updateContextProvider(
        current,
        workInProgress,
        renderExpirationTime,
      );
    case ContextConsumer:
      return updateContextConsumer(
        current,
        workInProgress,
        renderExpirationTime,
      );
    case MemoComponent: {
      const type = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps = resolveDefaultProps(type.type, unresolvedProps);
      return updateMemoComponent(
        current,
        workInProgress,
        type,
        resolvedProps,
        updateExpirationTime,
        renderExpirationTime,
      );
    }
    case SimpleMemoComponent: {
      return updateSimpleMemoComponent(
        current,
        workInProgress,
        workInProgress.type,
        workInProgress.pendingProps,
        updateExpirationTime,
        renderExpirationTime,
      );
    }
    case IncompleteClassComponent: {
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultProps(Component, unresolvedProps);
      return mountIncompleteClassComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderExpirationTime,
      );
    }
    default:
      invariant(
        false,
        'Unknown unit of work tag. This error is likely caused by a bug in ' +
          'React. Please file an issue.',
      );
  }
}
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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262

注意，最顶层 workInProgress.expirationTime; 这个 expirationTime Fiber 节点上的 expirationTime
- 对比 ReactFiberScheduler.js 中的 renderRoot 中读取的 root.nextExpirationTimeToWorkOn
- 这个 root 是 FiberRoot, 而 FiberRoot 对应的 Fiber对象是 RootFiber
- RootFiber 是 FiberRoot 的 current 属性，它没有对应React组件树的任何节点, 它只对应 FiberRoot 节点
  - FiberRoot 节点也就是挂载整个应用到的 Dom 节点
  - FiberRoot 上面存储整个应用的 expirationTime 和
- RootFiber 的 stateNode 属性是 FiberRoot
- FiberRoot 上面会存储整个应用上面的 expirationTime 和 nextExpirationTimeToWorkOn
- 上面的两个值意义是不一样的, 在 renderRoot 函数中的一段代码如下
```
// Reset the stack and start working from the root.
resetStack();
nextRoot = root;
nextRenderExpirationTime = expirationTime;
// nextUnitOfWork 是一个Fiber对象, 对应 RootFiber, 而非 FiberRoot
// 更新过程使用的都是 Fiber 对象，不会是 FiberRoot
nextUnitOfWork = createWorkInProgress(
  nextRoot.current, // 注意这里
  null,
  nextRenderExpirationTime,
);
1
2
3
4
5
6
7
8
9
10
11
```
  - nextUnitOfWork 才是我们每一个节点去更新时要操作的节点对象
- 所以，workInProgress.expirationTime 是对应Fiber节点产生更新的过期时间
  - 这里页面点击按钮让某个组件更新，最多到App上面创建更新
  - 不可能到 RootFiber 上面创建更新
- 而 RootFiber 产生更新时在 ReactDOM.render 的时候才会有
- 注意，在 beginWork 第一个参数是 current 是 Fiber对象，它对应的tag是 HostRoot
  - 在创建 FibeRoot 时, 在 ReactFiberReconciler.js 中的 createContainer 中
  - 有一个方法叫做 createFiberRoot, 定位到 ReactFiberRoot.js 中
  - 定位到 createHostRootFiber 方法，而这个方法又来自于 ReactFiber.js
  - 找到 createFiber, 是最终创建Fiber对象的时候调用的方法
```
return createFiber(HostRoot, null, null, mode);
1
```
  - 参数是 HostRoot, null, null, mode
  - 第一个参数 HostRoot 就是 Fiber的tag
- 在 ReactFiberScheduler.js 中 performUnitOfWork 接收的就是一个 workInProgress
  - 它传给 beginWork 的第一个参数 current 是 workInProgress.alternate
  - 在第一次渲染，也就是 ReactDOM.render 的时候, workInProgress 是刚刚创建的
  - 是不会在创建一个 current, 要等渲染结束后，把 current 和 workInProgress 的指针进行一个调换
  - 它才会变成有 current, 没有 workInProgress，再下次有更新产生，进行渲染时，才会创建一个新的 workInProgress
  - 这时候，current 和 workInProgress 都有了
  - 在最顶层判断 current 是否为 null, 也就是判断是否是第一次渲染

关于 bailoutOnAlreadyFinishedWork 这个方法帮助跳过该节点与其所有子节点的更新

function bailoutOnAlreadyFinishedWork(
  current: Fiber | null,
  workInProgress: Fiber,
  renderExpirationTime: ExpirationTime,
): Fiber | null {
  cancelWorkTimer(workInProgress);

  if (current !== null) {
    // Reuse previous context list
    workInProgress.firstContextDependency = current.firstContextDependency;
  }

  if (enableProfilerTimer) {
    // Don't update "base" render times for bailouts.
    stopProfilerTimerIfRunning(workInProgress);
  }

  // Check if the children have any pending work.
  const childExpirationTime = workInProgress.childExpirationTime; // 这个值是 React 16.5 加上的，更早跳过更新
  // 子树上无更新，或高优先级任务在这次渲染中完成的 则跳过，是一个非常大的优化
  if (
    childExpirationTime === NoWork ||
    childExpirationTime > renderExpirationTime
  ) {
    // The children don't have any work either. We can skip them.
    // TODO: Once we add back resuming, we should check if the children are
    // a work-in-progress set. If so, we need to transfer their effects.
    return null;
  } else {
    // This fiber doesn't have work, but its subtree does. Clone the child
    // fibers and continue.
    // 如果子树上有更新要执行，拷贝老的child
    cloneChildFibers(current, workInProgress);
    return workInProgress.child;
  }
}
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

回过头看 performUnitOfWork, return 了 child 之后，赋值给next

let next;
if (enableProfilerTimer) {
  // ... 跳过很多代码
  next = beginWork(current, workInProgress, nextRenderExpirationTime);
  // ... 跳过很多代码
} else {
  next = beginWork(current, workInProgress, nextRenderExpirationTime);
  workInProgress.memoizedProps = workInProgress.pendingProps;
}

// ... 跳过很多代码

if (next === null) {
  // If this doesn't spawn new work, complete the current work.
  next = completeUnitOfWork(workInProgress);
}

ReactCurrentOwner.current = null;
// next 不为 null, 直接 return
return next;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

return next; 之后回调 workLoop, 之后赋值给 nextUnitOfWork

while (nextUnitOfWork !== null) {
    nextUnitOfWork = performUnitOfWork(nextUnitOfWork);
  }
1
2
3

通过 while 循环继续执行 child 的更新
这就是循环能够成立的条件

回到 beginWork 中当节点还有更新的时候，执行 switch case
- 通过节点类型执行不同的方法来进行组件的更新
- 比如 FunctionComponent, MemoComponent 等

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/65840