commitAllHostEffects

这边就是对作用于HostComponent上的所有side effect进行commit

commitResetTextContent

就是把节点的文字内容设置为空字符串

function commitResetTextContent(current: Fiber) {
  if (!supportsMutation) {
    return
  }
  resetTextContent(current.stateNode)
}

export function resetTextContent(domElement: Instance): void {
  setTextContent(domElement, '')
}

let setTextContent = function(node: Element, text: string): void {
  if (text) {
    let firstChild = node.firstChild

    if (
      firstChild &&
      firstChild === node.lastChild &&
      firstChild.nodeType === TEXT_NODE
    ) {
      firstChild.nodeValue = text
      return
    }
  }
  node.textContent = text
}

commitDetachRef

把ref置空，因为这个组件后续需要设置ref，所以之前ref上的值需要先清空

function commitDetachRef(current: Fiber) {
  const currentRef = current.ref
  if (currentRef !== null) {
    if (typeof currentRef === 'function') {
      currentRef(null)
    } else {
      currentRef.current = null
    }
  }
}

placement & update & deletion

function commitAllHostEffects() {
  while (nextEffect !== null) {
    recordEffect()

    const effectTag = nextEffect.effectTag

    if (effectTag & ContentReset) {
      commitResetTextContent(nextEffect)
    }

    if (effectTag & Ref) {
      const current = nextEffect.alternate
      if (current !== null) {
        commitDetachRef(current)
      }
    }

    let primaryEffectTag = effectTag & (Placement | Update | Deletion)
    switch (primaryEffectTag) {
      case Placement: {
        commitPlacement(nextEffect)
        nextEffect.effectTag &= ~Placement
        break
      }
      case PlacementAndUpdate: {
        // Placement
        commitPlacement(nextEffect)
        nextEffect.effectTag &= ~Placement

        // Update
        const current = nextEffect.alternate
        commitWork(current, nextEffect)
        break
      }
      case Update: {
        const current = nextEffect.alternate
        commitWork(current, nextEffect)
        break
      }
      case Deletion: {
        commitDeletion(nextEffect)
        break
      }
    }
    nextEffect = nextEffect.nextEffect
  }
}

results matching ""

No results matching ""

扫码添加Jokcy，更多更新更优质的前端学习内容不断更新中，期待与你一起成长！