源码解析

bubbleProperties方法

bubbleProperties方法用于将子节点的属性冒泡到父节点。属性包括childLanes、subtreeFlags、flags。

function bubbleProperties(completedWork) {
  // 计算 bailout 状态：
  // 如果当前节点的 alternate 存在，且 alternate 的子节点与当前节点的子节点相同，
  // 则说明当前节点的子树没有发生变化，直接返回 true，后续React可以跳过对子节点的重新协调
  var didBailout =
      null !== completedWork.alternate &&
      completedWork.alternate.child === completedWork.child,
      // 用于累加子节点的 lanes
    newChildLanes = 0,
    // 用于累加子节点的 subtreeFlags 和 flags
    subtreeFlags = 0;
 
 // didBailout 为 true或false时，遍历的逻辑都是一样，区别在于didBailout为true时，subtreeFlags 只累加子节点的 subtreeFlags 和 flags 的低16位,标记子树没有更新

  if (didBailout)
    for (var child$107 = completedWork.child; null !== child$107; )
      (newChildLanes |= child$107.lanes | child$107.childLanes),
        (subtreeFlags |= child$107.subtreeFlags & 65011712),
        (subtreeFlags |= child$107.flags & 65011712),
        (child$107.return = completedWork),
        (child$107 = child$107.sibling);
  else
    for (child$107 = completedWork.child; null !== child$107; )
      (newChildLanes |= child$107.lanes | child$107.childLanes),
        (subtreeFlags |= child$107.subtreeFlags),
        (subtreeFlags |= child$107.flags),
        (child$107.return = completedWork),
        (child$107 = child$107.sibling);
  // 更新父节点属性      
  completedWork.subtreeFlags |= subtreeFlags;
  completedWork.childLanes = newChildLanes;

  // 返回didBailout值
  return didBailout;
}