画布 1
beginWork
  FunctionComponent
    updateFunctionComponent
      renderWithHooks
        children = Component(props, secondArg)
      reconcileChildren
        reconcileChildFibers
          reconcileSingleElement
            key 相同，type 相同
              复用 FiberNode 节点
            key 相同，type 不同
              将 child 及其兄弟 fiber 都标记删除。
            key 不同
              仅将 child 标记删除
          reconcileSinglePortal
          reconcileSingleTextNode
          reconcileChildrenArray
            1、同时遍历 newChildren 和 oldFiber
              两者 key 相同，type 相同
                复用节点
              两者 key 不同、文本节点和数组节点之前存在 key
                跳出循环，会走下面2，3，4步
              两者 key 相同，type 不同
                创建 newFiber，同时将 oldFiber 标记为删除
            2、newChildren 遍历完，oldFiber 没遍历完
              剩余 oldFiber 后续 siblings 标记删除
            3、newChildren 没遍历完，oldFiber 遍历完
              剩余 newChildren 创建 newFiber
            4、newChildren 没遍历完，oldFiber 没遍历完
              优先复用节点
              没有则创建 newFiber
                同时将 oldFiber 标记为删除
          reconcileChildrenIterator
      返回下一个工作单元 workInProgress.child
  ClassComponent
    updateClassComponent
      shouldUpdate
        不存在实例，直接创建
          constructClassInstance
            adoptClassInstance
              instance.updater = classComponentUpdater;
                isMounted
                enqueueSetState
                  isMounted
                  enqueueSetState
                    getInstance
                    requestEventTime
                    requestUpdateLane
                    createUpdate
                    enqueueUpdate
                    scheduleUpdateOnFiber
                  enqueueReplaceState
                  enqueueForceUpdate
                enqueueReplaceState
                enqueueForceUpdate
              workInProgress.stateNode = instance;
          mountClassInstance
            initializeUpdateQueue
              初始化 workInProgress 更新队列 UpdateQueue
              workInProgress.updateQueue = UpdateQueue
            processUpdateQueue
              形成 workInProgress 更新队列链表
              形成 current 更新队列链表
              不断移动 next 遍历 workInProgress 的更新队列
                类似 createUpdate 一样手动创建一个 update 对象
                getStateFromUpdate
                  ReplaceState
                    const nextState = payload.call(instance, prevState, nextProps);
                    return nextState;
                  CaptureUpdate
                  UpdateState
                    partialState = payload.call(instance, prevState, nextProps)
                    return Object.assign({}, prevState, partialState)
                  ForceUpdate
                    return prevState;
                firstBaseUpdate.next 为 null 且 pendingQueue 为 null
                  终止循环
                firstBaseUpdate.next 为 null 且 pendingQueue 不为 null
                  因为调度的原因，可能上一层的 Update 没执行完，放在 lastPendingUpdate 之后
              更新 UpdateQueue 对象的 baseState、firstBaseUpdate、lastBaseUpdate
              更新 workInProgress 的 memoizedState
                workInProgress.memoizedState = newState;
            getDerivedStateFromProps
              const partialState = getDerivedStateFromProps(nextProps, prevState);
              返回新的 state
                workInProgress.memoizedState = Object.assign({}, prevState, partialState);
            向下兼容
              callComponentWillMount
              processUpdateQueue
        存在实例，可以复用
          resumeMountClassInstance
        更新实例
          updateClassInstance
      finishClassComponent
        nextChildren = instance.render();
        reconcileChildren
          同上函数组件一样的逻辑
        返回下一个工作单元 workInProgress.child
  其余14类组件，注释里写的有，后续看到再展开
  ForwardRef
  HostPortal
  HostText
  HostComponent
  HostRoot
  LazyComponent
  SuspenseComponent
  IndeterminateComponent
以首次渲染更新函数组件为例
1、返回下一个工作单元：即第一个子节点 workInProgress.child
2、通过 current.child.sibling 处理了所有的子节点
3、每个子节点的 return 属性均指向父节点 current
一、updateFunctionComponent 参数
1、current: 代表 旧 Fiber
2、workInProgress: 代表新 Fiber
3、Component: 这个 type 实际是函数组件本身，执行就会返回函数组件 return 的内容
4、resolvedProps: 新的 props
5、renderLanes: 调度优先级
二、updateFunctionComponent 内部
1、renderWithHooks 返回函数组件的children
2、reconcileChildren 通过 sibling 处理所有子节点
一、renderWithHooks参数
1、current: 代表 旧 Fiber
2、workInProgress: 代表新 Fiber
3、Component: 这个 type 实际是函数组件本身，执行就会返回函数组件 return 的内容
4、nextProps: 新的 props
5、context: 顶层 context
6、renderLanes: 调度优先级
一、reconcileChildren 参数
1、current: 代表 旧 Fiber 的第一个子节点
2、workInProgress: 代表新 Fiber
3、nextChildren: 对于 class 组件是 instance.render(); 对于函数组件是 renderWithHooks 返回的值
4、renderLanes: 调度优先级
二、reconcileChildren 实际调用
1、实际会调用 ReactChildFiber.old.js 文件的 ChildReconciler 函数
2、实际会调用 ChildReconciler 函数
3、ChildReconciler 会返回 reconcileChildFibers 函数
三、reconcileChildren 返回
workInProgress.child = reconcileChildFibers(
workInProgress,
current.child,
nextChildren,
renderLanes,
);
reconcileChildFibers 会执行 reconcileChildFibers，通过 sibling 处理所有子节点
一、reconcileChildFibers 的参数即为 reconcileChildren 的参数
二、reconcileChildFibers 参数
1、returnFiber: 构建中 Fiber
2、currentFirstChild: 代表 旧 Fiber 的第一个子节点
3、newChild: 对于 class 组件是 instance.render(); 对于函数组件是 renderWithHooks 返回的值
4、lanes: 调度优先级
一、参数相关
1、returnFiber: 构建中 Fiber
2、currentFirstChild: 代表 旧 Fiber 的第一个子节点
3、newChild: 不同组件实际返回的子节点
4、lanes: 调度优先级
一、reconcileChildrenArray 参数
1、returnFiber: 构建中 Fiber
2、currentFirstChild: 代表 旧 Fiber 的第一个子节点
3、element: 不同组件实际返回的子节点
4、lanes: 调度优先级
一、updateClassComponent 参数
1、current: 代表 旧 Fiber
2、workInProgress: 代表新 Fiber
3、Component: 这个 type 实际是 class 组件本身，执行就会返回class 组件 render 的内容
4、resolvedProps: 新的 props
5、renderLanes: 调度优先级
一、参数
1、workInProgress: 新 Fiber
2、Component: 组件 type，即为 class 函数组件本身
3、nextProps: 新的 props
与 updateContainer 的流程是一样的
一、参数
1、workInProgress: 新 Fiber
2、Component: 组件 type，即为 class 函数组件本身
3、nextProps: 新的 props
4、renderLanes: 调度优先级相关
1、创建 updateQueue 结构
baseState: fiber.memoizedState
本次更新前该 Fiber 节点的 state，Update 基于该 state 计算更新后的 state
firstBaseUpdate 和lastBaseUpdate
本次更新前该 Fiber 节点已保存的 Update
以链表形式存在，链表头为 firstBaseUpdate
链表尾为 lastBaseUpdate
shared.pending
触发更新时，产生的 Update 会保存在 shared.pending 中形成单向环状链表
当由 Update 计算 state 时这个环会被剪开并连接在 lastBaseUpdate 后面
effects
数组。保存 update.calback !== null 的 Update 更新对象（类似 createUpdate 一样手动创建一个 update 对象）
2、赋值给 Fiber 节点
fiber.updateQueue = queue;
1、首先处理 workInProgress 更新链表
第一步、lastBaseUpdate 为 null
firstBaseUpdate = workInProgress.updateQueue.shared.pending
第二步、lastBaseUpdate 不为 null
next
firstBaseUpdate -----------> workInProgress.updateQueue.shared.pending = lastPendingUpdate
第三步、再加入一个新的 Update
next next
firstBaseUpdate -----------> 上次 Update -----------> workInProgress.updateQueue.shared.pending = lastPendingUpdate
2、同样方式处理 current 更新链表
3、通过不断移动 next 遍历 workInProgress 的更新队列
类似 createUpdate 一样手动创建一个 update 对象 ->
getStateFromUpdate
一、getStateFromUpdate 参数
1、workInProgress: 新 Fiber
2、queue: workInProgress 更新队列
3、update: 类似 createUpdate 一样手动创建一个 update 对象
4、prevState: UpdateQueue.baseState
5、nextProps: new props
6、instance: class 组件实例
一、参数
1、workInProgress: 新 Fiber
2、Component: 组件 type，即为 class 函数组件本身
3、nextProps: 新的 props
4、renderLanes: 调度优先级相关
一、参数
1、current: 旧 Fiber
2、workInProgress: 新 Fiber
3、Component: 组件 type，即为 class 函数组件本身
4、nextProps: 新的 props
5、renderLanes: 调度优先级相关
一、参数
1、current: 旧 Fiber
2、workInProgress: 新 Fiber
3、Component: 组件 type，即为 class 函数组件本身
4、shouldUpdate: 上述计算结果
5、hasContext: context 相关
6、renderLanes: 调度优先级相关
Fragment
Mode
Profiler
ContextProvider
ContextConsumer
MemoComponent
SimpleMemoComponent
IncompleteClassComponent
SuspenseListComponent
FundamentalComponent
ScopeComponent
Block
OffscreenComponent
LegacyHiddenComponent