深入浅出浅谈位运算：React 源码解析（四）

2023-12-10 16:30:49

React 源码解析（四）：深入浅出浅谈位运算

位运算是在计算机编程中进行二进制操作的一种方法。二进制是指以 2 为基数的数字系统，由 0 和 1 两个数字组成。在计算机中，数据通常以二进制形式存储，因此位运算在计算机科学中具有重要意义。

二进制基础

在二进制系统中，每个数字都由一组位组成。位的权重从右到左依次递增，最右侧的位为最低位，权重为 1，依次类推。例如：

1101 二进制 = 1 × 2³ + 1 × 2¹ + 0 × 2⁰ = 13 十进制

位运算符

位运算符用于对二进制数字进行操作。常见的位运算符有：

AND（&） ：按位与运算，只有当两个位都为 1 时结果才为 1。
OR（|） ：按位或运算，只要有一个位为 1，结果就为 1。
XOR（^） ：按位异或运算，当两个位不同时结果才为 1。
NOT（~） ：按位取反运算，将 0 变成 1，将 1 变成 0。
左移（<<） ：将数字向左移动指定位数，空出的位用 0 填充。
右移（>>） ：将数字向右移动指定位数，空出的位用 0 或 1 填充。

位运算的应用

位运算在计算机科学中有很多应用，例如：

位掩码 ：用于提取或设置数据的特定位。
数据压缩 ：通过利用位运算压缩数据。
加密：通过位运算实现数据的加密和解密。
位字段 ：将数据结构中的不同字段存储在不同位中。
优化算法 ：通过位运算优化算法效率。

React 源码中的位运算

React 源码中也使用了位运算。例如，在 react-reconciler 模块中，使用位运算来优化 shouldComponentUpdate 方法的性能。

export default function shouldComponentUpdate(workInProgress: Fiber, prevProps: any, prevState: any): boolean {
  const instance = workInProgress.stateNode;
  if (instance.shouldComponentUpdate) {
    return instance.shouldComponentUpdate(prevProps, prevState, nextProps, nextState);
  }
  const oldProps = workInProgress.memoizedProps;
  const oldState = workInProgress.memoizedState;

  // TODO: Detox should update by default
  return (
    oldProps !== nextProps ||
    oldState !== nextState ||
    (workInProgress.updateQueue !== null && workInProgress.updateQueue.hasForceUpdate)
  );
}