关于前端:Tips副作用与位运算

最近在看这篇文章，从文章中理解到在Fiber节点中，与Fiber节点关联的effects，被编码在节点的effectTag字段之中。然而一个组件可能有多个副作用，那么React是如何通过一个字段判断要执行多个副作用的呢？

React应用了按位或结构了一个属性集, 比方：

• 0b00000000100，示意须要执行componentDidUpdate副作用
• 0b00100000000, 示意须要执行getSnapshotBeforeUpdate副作用

effectTag默认值是0。在updateClassInstance中，应用按位或增加副作用的标识

if (typeof instance.componentDidUpdate === 'function') {
    workInProgress.effectTag |= Update;
}
if (typeof instance.getSnapshotBeforeUpdate === 'function') {
    workInProgress.effectTag |= Snapshot;
}

比方咱们的组件同时领有Update副作用和Snapshot副作用，那么Fiber节点的effectTag就是

effectTag |= 0b00000000100
effectTag |= 0b00100000000

此时effectTag的二进制示意就是0b00100000100, 第3位等于1，第9位等于1。

在commitAllLifeCycles中，通过按位与判断是否须要对应的副作用

function commitAllLifeCycles(finishedRoot, ...) {
    while (nextEffect !== null) {
        const effectTag = nextEffect.effectTag;

        if (effectTag & (Update | Callback)) {
            const current = nextEffect.alternate;
            commitLifeCycles(finishedRoot, current, nextEffect, ...);
        }
    
        nextEffect = nextEffect.nextEffect;
    }
}

比方咱们的effectTag是0b00100000100， 咱们须要查看第三位是否设置为1，咱们应用按位与判断

0b00100000100 & 0b00000100100 // 不等于0
0b00100000000 & 0b00000100100 // 等于0

按位与的规定是：1 & 1 等于 1； 1 & 0 等于 0；0 & 1 等于0；0 & 0等于0。如果第3位不是1，按位与就会失去0。