关于前端: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。