首页

Appearance

React源码中flags按位运算 ​

按位运算符可以对整数进行二进制处理，这对于处理一组二进制标记非常有用。以下是一些常见的按位运算符：

  • 与(&)
  • 或(|)
  • 非(~)
  • 异或(^)
  • 左移(<<)
  • 有符号右移(>>)
  • 无符号右移(>>>)

1.使用按位与操作符(&)来检查是否设置了特定的位。 ​

js
//  flags是否包含flag
const isFlagSet = (flags, flag) => (flags & flag) === flag;

2.使用按位或操作符(|)来设置或清除特定的位。 ​

js
// flags中设置flag
const setFlag = (flags, flag) => flags | flag;
// flags中清除flag
const clearFlag = (flags, flag) => flags & ~flag;
// 切换flag
const toggleFlag = (flags, flag) => isFlagSet(flags, flag) ? clearFlag(flags, flag) : setFlag(flags, flag);

3.使用按位非操作符(~)来清除所有设置的位。 ​

js
const clearAllFlags = (flags) => ~flags;

4.使用按位异或操作符(^)来切换特定的位。 ​

js
const toggleFlag = (flags, flag) => flags ^ flag;

在React源码中，flags是一个用于表示组件或DOM节点状态的位掩码。React使用按位运算符来对这个掩码进行操作，以便快速检查不同的状态。以下是一个简化的例子，展示了如何使用按位运算符来处理状态标志：

js
// 假设有一个状态位掩码
let flags = 0;
 
// 定义状态常量
const Pending = 1; // 001
const HasError = 2; // 010
const IsMounted = 4; // 100
 
// 设置状态
flags |= Pending; // 将Pending状态设置为true，使用按位或运算符
flags |= HasError; // 将HasError状态设置为true
 
// 检查状态
if (flags & Pending) {
  // 执行某些操作，如中断渲染，因为有一个挂起的异步操作
}
if (flags & HasError) {
  // 执行某些操作，如显示错误界面
}
 
// 清除状态
flags &= ~Pending; // 使用按位与非运算符清除Pending状态
 
// 示例结束后，flags 的值为 HasError | IsMounted (3 | 4 = 7)