React源码中看到的一处疑惑点

Question

问题描述

代码位于 React 初次 render 时的 batch 逻辑

因为对这些位操作不太熟悉，看了半天也没有搞懂这块逻辑是为了判断什么，有没有对 JS 位操作熟悉的大佬帮忙解释一下

Answer 1

首先要理解位运算的规则：

• a & b：对于每一个比特位，只有两个操作数相应的比特位都是 1 时，结果才为 1，否则为 0
  0b100 & 0b110 = 0b100
• a | b：对于每一个比特位，当两个操作数相应的比特位至少有一个 1 时，结果为 1，否则为 0。
  0b100 | 0b110 = 0b110
• ~a ：反转操作数的比特位，即 0 变成 1，1 变成 0。
  ~ 0b100 = 0b011

完整的规则列表在这里 按位操作符

下面看具体的示例，假设有两种权限位：

let r    = 0b100 // 读
let w    = 0b010 // 写

&= ~

&= ~ 是删除的意思，a &= ~ b 等价于 a = a & (~b)，意为从a 中删除b 举例来看：

let user = 0b110 // user 有 r w 两个权限

想从user 中 删除r权限，先对r 取反

0b100 => 0b011

再和user按位与

0b110
&
0b011
=     
0b010

再看此时的user = 0b010，和w是一样的，而最初的user 为 0b110，兼具w 和 r的权限，现在只剩一个w，实现了删除的效果。

|=

相当于重新赋值，a |= b，等价于 a = a | b。现在为r重新赋予权限：

r |= w

0b100
0b010
=
0b110

此时的r中的1的位置包含了原有的r 和 w中的1的位置。所以新r具有读和写的权限。

以上是对截图中的位操作符的解释，我自己也在看源码，恰巧研究过React完整的位运算，最新的React的master代码已将优先级模型从expirationTime换成了Lanes，涉及到大量的位运算，我做了尽量完整的注释ReactFiberLane.js

希望有所帮助。