React 中基于位运算的复合类型设计

[bigggge]

创建于 2019-11-28 18:50

基于位运算的复合类型

在 React 源码中，我们经常可以看到一些有意思的代码，比如：

workInProgress.effectTag |= Update;
nextEffect.effectTag &= ~Placement;
(node.effectTag & Update) !== NoEffect;

平时基本不用位运算，很难第一时间看出这些代码代表什么意思，所以我们先看下 Update, Placement, NoEffect 到底是什么？

export const NoEffect = /*              */ 0b0000000000000;
export const PerformedWork = /*         */ 0b0000000000001;
export const Placement = /*             */ 0b0000000000010;
export const Update = /*                */ 0b0000000000100;
export const PlacementAndUpdate = /*    */ 0b0000000000110;
export const Deletion = /*              */ 0b0000000001000;
export const ContentReset = /*          */ 0b0000000010000;
export const Callback = /*              */ 0b0000000100000;
export const DidCapture = /*            */ 0b0000001000000;
export const Ref = /*                   */ 0b0000010000000;
export const Snapshot = /*              */ 0b0000100000000;
export const Passive = /*               */ 0b0001000000000;
export const Hydrating = /*             */ 0b0010000000000;
export const HydratingAndUpdate = /*    */ 0b0010000000100;

我们发现，这些值大部分只有一位是 1, 其他都是 0。 再看 PlacementAndUpdate 的值 0b0000000000110 刚好是 0b0000000000010 | 0b0000000000100 的结果，也就是 Placement 和 Update 按位或运算的值。

不难发现，React 基于位运算实现了需要数个变量或者数组才能完成的工作，简化了类型比较。

// 添加 Update Tag
workInProgress.effectTag |= Update;
// 清除 Placement Tag
nextEffect.effectTag &= ~Placement;
// 存在 Update Tag
(node.effectTag & Update) !== NoEffect;

相关代码：
https://github.com/facebook/react/blob/16.8.6/packages/shared/ReactSideEffectTags.js