react 源码中位运算符的使用详解
更新时间：2022年03月07日 16:32:43 作者：神奇大叔
这篇文章主要为大家详细介绍了react 位运算符，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
位运算符基本使用
- 按位与(&)：a & b对于每一个比特位,两个操作数都为 1 时, 结果为 1, 否则为 0
- 按位或(|)：a | b对于每一个比特位,两个操作数都为 0 时, 结果为 0, 否则为 1
- 按位异或(^)：a ^ b对于每一个比特位,两个操作数相同时, 结果为 1, 否则为 0
- 按位非(~)：~ a反转操作数的比特位, 即 0 变成 1, 1 变成 0
0000 0000 0000 0000 0000 0000 0000 0011 -> 3 1111 1111 1111 1111 1111 1111 1111 1100 -> ~ 3 = -4
左移位<<：各二进位全部左移若干位，高位丢弃，低位补0。
0000 0000 0000 0000 0000 0000 0000 0110 -> 6 0000 0000 0000 0000 0000 0000 0001 1000 -> 6 << 2 = 24
右移位>>：各二进位全部右移若干位，正数高位补0，负数高位补1，低位丢弃
0000 0000 0000 0000 0000 0000 0000 1100 -> 12 0000 0000 0000 0000 0000 0000 0000 0011 -> 12 >> 2 = 3 负数情况： 1111 1111 1111 1111 1111 1111 1111 0100 -> -12 1111 1111 1111 1111 1111 1111 1111 1101 -> -12 >> 2 = -3
无符号右移位>>>：各二进位全部右移若干位，高位补0，低位丢弃。
0000 0000 0000 0000 0000 0000 0000 1100 -> 12 0000 0000 0000 0000 0000 0000 0000 0011 -> 12 >>> 2 = 3 1111 1111 1111 1111 1111 1111 1111 0100 -> -12 0011 1111 1111 1111 1111 1111 1111 1101 -> -12 >> 2 = 1073741821
正数计算负数：
取反后+1
＋5：0101 －5：取反1010 最低位+1 = 1011，1011即为二进制的-5
负数倒推正数：同样为取反后+1
在js中位运算的特点
- 位运算只能在整型变量之间进行运算
- js 中的Number类型在底层都是以浮点数(参考 IEEE754 标准)进行存储.
- js 中所有的按位操作符的操作数都会被转成补码（two’s complement）形式的有符号32位整数
- 操作数为浮点型时，转换流程: 浮点数 -> 整数(丢弃小数位) -> 位运算
- 操作数的大小超过Int32范围(-2^31 ~ 2^31-1). 超过范围的二进制位会被截断, 取低位32bit
- 另外由于 js 语言的隐式转换, 对非Number类型使用位运算操作符时会隐式会发生隐式转换, 相当于先使用Number(xxx)将其转换为number类型, 再进行位运算:
'str' >>> 0; // ===> Number('str') >>> 0 ===> NaN >>> 0 = 0位掩码
通过位移定义的一组枚举常量, 可以利用位掩码的特性, 快速操作这些枚举产量(增加, 删除, 比较)
const A = 1 << 0; // 0b00000001 const B = 1 << 1; // 0b00000010 const C = 1 << 2; // 0b00000100 属性增加| ABC = A | B | C //0b00000111 属性删除& ~ AB = ABC & ~C //0b00000011 属性比较 AB 当中包含 B: AB & B === B。// AB & B =>0b00000010 ===B,true AB 当中不包含 C: AB & C === 0 // AB & C =>0b00000000 === 0,true
react中的位运算
- react在涉及状态、标记位、优先级操作的地方大量使用了位运算
标记状态
- react源码内部有多个上下文环境，在执行函数时经常需要判断当前处在哪个上下文环境中
// A上下文 const A = 1; //0001 // B上下文 const B = 2; //0010 // 当前所处上下文 let curContext = 0; // 没有处在上下文的标志 const NoContext = 0; 假设进入A的上下文 curContext |= A; //即curContext=curContext｜A =>0001 判断是否处在某一上下文中，结合按位与操作与NoContext // 是否处在A上下文中，这里为true (curContext & A) !== NoContext //curContext & A)=>0001 !==0000,所以为true，表示在A的上下文中 // 是否处在B上下文中，这里为false，和上方同理 (curContext & B) !== NoContext 离开上下文，取出标记进行恢复 // 从当前上下文中移除上下文A curContext &= ~A; //curContext=curContext& ～A，即0001&1110=0000，进行恢复 // 是否处在A上下文中，此处为false (curContext & A) !== NoContext //（curContext & A）为0000
ReactFiberLane.js
- 优先级定义
- 源码中变量只列出了 31 位, 由于 js 中位运算都会转换成Int32(上文已经解释), 最多为 32 位, 且最高位是符号位. 所以除去符号位, 最多只有 31 位可以参与运算
//类型定义 export opaque type Lanes = number; export opaque type Lane = number; // 变量定义 export const NoLanes: Lanes = /* */ 0b0000000000000000000000000000000; export const NoLane: Lane = /* */ 0b0000000000000000000000000000000; export const SyncLane: Lane = /* */ 0b0000000000000000000000000000001; export const SyncBatchedLane: Lane = /* */ 0b0000000000000000000000000000010; export const InputDiscreteHydrationLane: Lane = /* */ 0b0000000000000000000000000000100; const InputDiscreteLanes: Lanes = /* */ 0b0000000000000000000000000011000; const InputContinuousHydrationLane: Lane = /* */ 0b0000000000000000000000000100000; const InputContinuousLanes: Lanes = /* */ 0b0000000000000000000000011000000; // ... // ... const NonIdleLanes = /* */ 0b0000111111111111111111111111111; export const IdleHydrationLane: Lane = /* */ 0b0001000000000000000000000000000; const IdleLanes: Lanes = /* */ 0b0110000000000000000000000000000; export const OffscreenLane: Lane = /* */ 0b1000000000000000000000000000000;
getHighestPriorityLanes
function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {
// 判断 lanes中是否包含 SyncLane
if ((SyncLane & lanes) !== NoLanes) {
return_highestLanePriority = SyncLanePriority;
return SyncLane;
}
// 判断 lanes中是否包含 SyncBatchedLane
if ((SyncBatchedLane & lanes) !== NoLanes) {
return_highestLanePriority = SyncBatchedLanePriority;
return SyncBatchedLane;
}
// ...
// ... 省略其他代码
return lanes;
}
getHighestPriorityLane
- react中处在越低bit位的更新优先级越高（越需要优先处理）
- 分离出最高优先级
- -lanes：表示负数的操作，即先取反然后+1
0b000 0000 0000 0000 0000 0000 0001 0001
function getHighestPriorityLane(lanes) {
return lanes & -lanes;
}
-lanse：
lanes 0001 0001
~lanes 1110 1110 // 第一步
+1 1110 1111 // 第二步
0001 0001 // lanes
& 1110 1111 // -lanes
-----------
0000 0001
若lanes为0001 0000
0001 0000 // lanes
& 1111 0000 // -lanes
-----------
0001 0000
getLowestPriorityLane
- 假设 lanes(InputDiscreteLanes) = 0b0000000000000000000000000011000
- 那么 clz32(lanes) = 27, 由于 InputDiscreteLanes 在源码中被书写成了 31 位, 虽然在字面上前导 0 是 26 个, 但是转成标准 32 位后是 27 个
- index = 31 - clz32(lanes) = 4
- 最后 1 << index = 0b0000000000000000000000000010000
- 相比最初的 InputDiscreteLanes, 分离出来了最左边的1
- 通过 lanes 的定义, 数字越小的优先级越高, 所以此方法可以获取最低优先级的 lane
function getLowestPriorityLane(lanes: Lanes): Lane {
// This finds the most significant non-zero bit.
const index = 31 - clz32(lanes);
return index < 0 ? NoLanes : 1 << index;
}
react-reconciler上下文定义
export const NoContext = /* */ 0b0000000; const BatchedContext = /* */ 0b0000001; const EventContext = /* */ 0b0000010; const DiscreteEventContext = /* */ 0b0000100; const LegacyUnbatchedContext = /* */ 0b0001000; const RenderContext = /* */ 0b0010000; const CommitContext = /* */ 0b0100000; export const RetryAfterError = /* */ 0b1000000; // ... // Describes where we are in the React execution stack let executionContext: ExecutionContext = NoContext;
scheduleUpdateOnFiber
// scheduleUpdateOnFiber函数中包含了好多关于executionContext的判断(都是使用位运算)
export function scheduleUpdateOnFiber(
fiber: Fiber,
lane: Lane,
eventTime: number,
) {
if (root === workInProgressRoot) {
// 判断: executionContext 不包含 RenderContext
if (
deferRenderPhaseUpdateToNextBatch ||
(executionContext & RenderContext) === NoContext
) {
// ...
}
}
if (lane === SyncLane) {
if (
// 判断: executionContext 包含 LegacyUnbatchedContext
(executionContext & LegacyUnbatchedContext) !== NoContext &&
// 判断: executionContext 不包含 RenderContext或CommitContext
(executionContext & (RenderContext | CommitContext)) === NoContext
) {
// ...
}
}
// ...
}
- 在特定的情况下, 使用位运算不仅是提高运算速度, 且位掩码能简洁和清晰地表示出二进制变量之间的关系.
- 但是缺点也很明显, 不够直观, 扩展性不好(在 js 当中的二进制变量, 除去符号位, 最多只能使用 31 位, 当变量的数量超过 31 个就需要组合, 此时就会变得复杂)
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
React源码分析之useCallback与useMemo及useContext详解
这篇文章主要介绍了React useCallback与useMemo及useContext源码分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-11-11
React 18.2.0 引入了一系列并发机制的新特性,旨在帮助各位开发者更好地控制和优化应用程序的性能和用户体验,下面我们就来看看如何利用这些新特性构建更高效、更响应式的应用程序吧2024-03-03
解析react 函数组件输入卡顿问题 usecallback react.memo
useMemo是一个react hook,我们可以使用它在组件中包装函数。可以使用它来确保该函数中的值仅在依赖项之一发生变化时才重新计算，这篇文章主要介绍了react 函数组件输入卡顿问题 usecallback react.memo,需要的朋友可以参考下2022-07-07
React-redux 中useSelector使用源码分析
在一个 action 被分发(dispatch) 后，useSelector() 默认对 select 函数的返回值进行引用比较 ===，并且仅在返回值改变时触发重渲染，，这篇文章主要介绍了React-redux 中useSelector使用,需要的朋友可以参考下2023-10-10
React Hooks是React 16.8版本引入的新特性,它使得在函数组件中也能够使用状态（state）和其他React特性,本文就来详细介绍一下React Hooks项目实战,感兴趣的可以了解一下2023-11-11
这篇文章主要为大家介绍了JWT身份校验与React-router无缝集成的探讨解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最近两个项目都用到了React Navigation，所以就研究一下如何使用，本文主要介绍了react-navigation6.x路由库的基本使用，感兴趣的可以了解一下2021-11-11
在React中使用IndexedDB进行前端离线存储,可以存储大量数据,支持复杂的数据类型和高性能查询,通过示例展示了如何创建数据库、添加数据、查询数据和构建一个简单的待办事项应用,感兴趣的朋友跟随小编一起看看吧2024-11-11
React 中浅比较的概念无处不在，它在不同的流程中起着关键的作用，本文主要介绍了React 中的浅比较是如何工作的，具有一定的参考价值，感兴趣的可以了解一下2022-04-04
在React中，用户登录功能是一个常见的需求，为了实现该功能，需要对用户输入的用户名和密码进行验证，并将验证结果保存到应用程序状态中，在React中，可以使用Redux Toolkit来管理应用程序状态，从而实现用户登录功能，需要详细了解可以参考下文2023-05-05
最新评论