React源码Part8——Commit(Layout阶段)

React源码Part-1——代数效应：https://segmentfault.com/a/11...
React源码Part2——渲染原理： https://segmentfault.com/a/11...
React源码Part3——Fiber架构：https://segmentfault.com/a/11...
React源码Part4——Render渲染(Mount阶段)：https://segmentfault.com/a/11...
React源码Part4——Render渲染(Update阶段):https://segmentfault.com/a/11...
React源码Part5——commit阶段(处理class组件生命周期)： https://segmentfault.com/a/11...
React源码Part6——Commit阶段(beforeMutation)：https://segmentfault.com/a/11...
React源码Part7——Commit(Mutation阶段)： https://segmentfault.com/a/11...
参考链接：React技术揭秘——https://react.iamkasong.com/p...

React中双缓存机制触发——Current指针替换

发生时间点是：在commit阶段中的Mutation阶段之后，Layout阶段之前
原因一：在Mutation阶段时，会执行componentWillUnMount生面周期，此时可能会操作原来Fibre节点的内容；为确保数据的可靠性所以不会修改Current指针
原因三： Mutation阶段完成后，此时已经完成WorkInProgress中Fibre树的渲染
原因二：在Layout阶段会执行ComponentDidMount、ComponentDidUpdate生命周期；为确保数据的纯净和更新，所以在Layout阶段之前发替换Current指针。

Commit中的Layout阶段的执行过程？

入口函数：commitLayoutEffects
准备工作：commitLayoutEffects_begin
预处理：commitLayoutMountEffects_complete
1. 对于函数组件Hook，useLayoutEffect的回调函数在这里执行
对Fibre节点进行处理：commitLayoutEffectOnFiber
1. 对于Class组件，componentDidMount和componentDidUpdate生命周期触发

Commit中的Layout阶段做了什么？

对于Class组件而言，在这个阶段会执行ComponentDidMount、ComponentDidUpdate生命周期
对于函数组建Hook而言，会执行useLayoutEffect的回调函数(不包括返回值)
1. 对于下面这个useEffect，会在Layout阶段执行handleStatusChange函数(create)；在Mutation阶段执行useEffect返回的函数(destroy)，用于清理副作用
```
 useEffect(() => {
  function handleStatusChange(status) {
 setIsOnline(status.isOnline);
  }
 
  return () => {
 ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
});
```

commitLayoutEffects——入口函数

export function commitLayoutEffects(
  finishedWork: Fiber,
  root: FiberRoot,
  committedLanes: Lanes,
): void {
  inProgressLanes = committedLanes;
  inProgressRoot = root;
  nextEffect = finishedWork;

  commitLayoutEffects_begin(finishedWork, root, committedLanes);

  inProgressLanes = null;
  inProgressRoot = null;
}

commitLayoutEffects_begin——准备工作

React源码Part8——Commit(Layout阶段)

commitLayoutMountEffects_complete——预处理

执行useLayoutEffect的回调函数safelyCallCommitHookLayoutEffectListMount
1. 可以在switch语句汇总看到，case条件是 SimpleMemoComponent

React源码Part8——Commit(Layout阶段)

commitLayoutMountEffects_complete代码片段

function commitLayoutMountEffects_complete(
subtreeRoot: Fiber,
root: FiberRoot,
committedLanes: Lanes,
) {
// Suspense layout effects semantics don't change for legacy roots.
const isModernRoot = (subtreeRoot.mode & ConcurrentMode) !== NoMode;

while (nextEffect !== null) {
  const fiber = nextEffect;

  if (
    enableSuspenseLayoutEffectSemantics &&
    isModernRoot &&
    offscreenSubtreeWasHidden &&
    !offscreenSubtreeIsHidden
  ) {
    // Inside of an Offscreen subtree that changed visibility during this commit.
    // If this subtree was hidden, layout effects will have already been destroyed (during mutation phase)
    // but if it was just shown, we need to (re)create the effects now.
    // TODO (Offscreen) Check: flags & LayoutStatic
    switch (fiber.tag) {
      case FunctionComponent:
      case ForwardRef:
      case SimpleMemoComponent: {
        if (
          enableProfilerTimer &&
          enableProfilerCommitHooks &&
          fiber.mode & ProfileMode
        ) {
          try {
            startLayoutEffectTimer();
            safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
          } finally {
            recordLayoutEffectDuration(fiber);
          }
        } else {
          safelyCallCommitHookLayoutEffectListMount(fiber, fiber.return);
        }
        break;
      }
      case ClassComponent: {
        const instance = fiber.stateNode;
        if (typeof instance.componentDidMount === 'function') {
          safelyCallComponentDidMount(fiber, fiber.return, instance);
        }
        break;
      }
    }

    // TODO (Offscreen) Check flags & RefStatic
    switch (fiber.tag) {
      case ClassComponent:
      case HostComponent:
        safelyAttachRef(fiber, fiber.return);
        break;
    }
  } else if ((fiber.flags & LayoutMask) !== NoFlags) {
    const current = fiber.alternate;
    if (__DEV__) {
     // DEV环境可以暂时不管
    
    } else {
      try {
        commitLayoutEffectOnFiber(root, current, fiber, committedLanes);
      } catch (error) {
        captureCommitPhaseError(fiber, fiber.return, error);
      }
    }
  }

  if (fiber === subtreeRoot) {
    nextEffect = null;
    return;
  }

  const sibling = fiber.sibling;
  if (sibling !== null) {
    ensureCorrectReturnPointer(sibling, fiber.return);
    nextEffect = sibling;
    return;
  }

  nextEffect = fiber.return;
}
}