PowerjettcommitAllHostEffects
commitAllHostEffects主要做了哪些事呢? 将dom节点进行插入、更新、删除、然后append到container中; 这个阶段结束，当前页面已经渲染出来了;
这里tag的意思:
- Placement 放置DOM, 也就是插入到DOM树中
- PlacementAndUpdate 插入和更新
- Update 更新DOM,比如styles之类的改变了
- Deletion 删除DOM
typescript
function commitAllHostEffects() {
while (nextEffect !== null) {
const effectTag = nextEffect.effectTag;
// 如果存在文本清空的tag， 就执行设置成空
if (effectTag & ContentReset) {
commitResetTextContent(nextEffect);
}
let primaryEffectTag = effectTag & (Placement | Update | Deletion);
switch (primaryEffectTag) {
// 插入dom
case Placement: {
commitPlacement(nextEffect);
// 从effectTag上移除当前操作完的tag
nextEffect.effectTag &= ~Placement;
break;
}
// 插入和更新DOM
case PlacementAndUpdate: {
commitPlacement(nextEffect);
nextEffect.effectTag &= ~Placement;
const current = nextEffect.alternate;
commitWork(current, nextEffect);
break;
}
// 更新DOM
case Update: {
const current = nextEffect.alternate;
commitWork(current, nextEffect);
break;
}
// 删除DOM
case Deletion: {
commitDeletion(nextEffect);
break;
}
}
nextEffect = nextEffect.nextEffect;
}
}