偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

聊聊React源碼中的位運(yùn)算技巧

開(kāi)發(fā) 前端
在涉及狀態(tài)、標(biāo)記位、優(yōu)先級(jí)操作的地方大量使用了位運(yùn)算。本文會(huì)講解其中比較有代表性的部分。學(xué)到之后,當(dāng)遇到類(lèi)似場(chǎng)景時(shí)露一手,你就是業(yè)務(wù)線(xiàn)最靚的仔。

[[428027]]

大家好,我卡頌。

這兩年有不少朋友和我吐槽React源碼,比如:

  • 調(diào)度器為什么用小頂堆這種數(shù)據(jù)結(jié)構(gòu),直接用數(shù)組不行?
  • 源碼里各種單向鏈表、環(huán)狀鏈表,直接用數(shù)組不行?
  • 源碼里各種位運(yùn)算,有必要么?

作為業(yè)務(wù)依賴(lài)的框架,為了提升一點(diǎn)點(diǎn)運(yùn)行時(shí)性能,React從不吝惜將源碼寫(xiě)的很復(fù)雜。

[[428028]]

在涉及狀態(tài)、標(biāo)記位、優(yōu)先級(jí)操作的地方大量使用了位運(yùn)算。

本文會(huì)講解其中比較有代表性的部分。學(xué)到之后,當(dāng)遇到類(lèi)似場(chǎng)景時(shí)露一手,你就是業(yè)務(wù)線(xiàn)最靚的仔。

幾個(gè)常用位運(yùn)算

在JS中,位運(yùn)算的操作數(shù)會(huì)先轉(zhuǎn)換為Int32(32位有符號(hào)整型),執(zhí)行完位運(yùn)算會(huì)Int32對(duì)應(yīng)浮點(diǎn)數(shù)。

在React中,主要用到3種位運(yùn)算符 —— 按位與、按位或、按位非。

按位與(&)

對(duì)于兩個(gè)二進(jìn)制操作數(shù)的每個(gè)bit,如果都為1,則結(jié)果為1,否則為0。

舉個(gè)例子,計(jì)算3 & 2,首先將操作數(shù)轉(zhuǎn)化為Int32:

  1. // 3對(duì)應(yīng)的 Int32 
  2. 0b000 0000 0000 0000 0000 0000 0000 0011  
  3. // 2對(duì)應(yīng)的 Int32 
  4. 0b000 0000 0000 0000 0000 0000 0000 0010  

為了直觀,我們排除前面的0,只保留最后8位(實(shí)際參與計(jì)算的應(yīng)該是32位):

  1.   0000 0011 
  2. & 0000 0010 
  3. ----------- 
  4.   0000 0010 

所以3 & 2計(jì)算結(jié)果轉(zhuǎn)化為浮點(diǎn)數(shù)后為2。

按位或(|)

對(duì)于兩個(gè)二進(jìn)制操作數(shù)的每個(gè)bit,如果都為0,則結(jié)果為0,否則為1。

計(jì)算10 | 3:

  1.   0000 1010 
  2. | 0000 0011 
  3. ----------- 
  4.   0000 1011 

計(jì)算結(jié)果轉(zhuǎn)化為浮點(diǎn)數(shù)后為11。

按位非(~)

對(duì)一個(gè)二進(jìn)制操作數(shù)的每個(gè)bit,逐位進(jìn)行取反操作(0、1互換)

對(duì)于~3,將3轉(zhuǎn)化為Int32后逐位取反:

  1. // 3對(duì)應(yīng)的 Int32 
  2. 0b000 0000 0000 0000 0000 0000 0000 0011  
  3. // 逐位取反 
  4. 0b111 1111 1111 1111 1111 1111 1111 1100 

計(jì)算結(jié)果轉(zhuǎn)化為浮點(diǎn)數(shù)后為-4。

如果你對(duì)這個(gè)結(jié)果有疑惑,可以去了解補(bǔ)碼相關(guān)知識(shí)

讓我們從易到難,看看位運(yùn)算在React中的應(yīng)用。

標(biāo)記狀態(tài)

React源碼內(nèi)部有多個(gè)上下文環(huán)境,在執(zhí)行函數(shù)時(shí)經(jīng)常需要判斷當(dāng)前處在哪個(gè)上下文環(huán)境中。

假設(shè)共有三種上下文情況:

  1. // A上下文 
  2. const A = 1; 
  3. // B上下文 
  4. const B = 2; 
  5. // 沒(méi)有處在上下文 
  6. const NoContext = 0; 

當(dāng)進(jìn)入某個(gè)上下文時(shí),可以使用按位或操作標(biāo)記進(jìn)入:

  1. // 當(dāng)前所處上下文 
  2. let curContext = 0; 
  3.  
  4. // 進(jìn)入A上下文 
  5. curContext |= A; 

我們用8位二進(jìn)制舉例(同樣,實(shí)際應(yīng)該是Int32,這里是為了簡(jiǎn)化),curContext與A執(zhí)行按位或操作:

  1.   0000 0000  // curContext 
  2. | 0000 0001  // A 
  3. ----------- 
  4.   0000 0001 

此時(shí)可以結(jié)合按位與操作與NoContext來(lái)判斷是否處在某一上下文中:

  1. // 是否處在A上下文中 true 
  2. (curContext & A) !== NoContext 
  3.  
  4. // 是否處在B上下文中 false 
  5. (curContext & B) !== NoContext 

離開(kāi)某上下文后,結(jié)合按位與、按位非移除標(biāo)記:

  1. // 從當(dāng)前上下文中移除上下文A 
  2. curContext &= ~A; 
  3.  
  4. // 是否處在A上下文中 false 
  5. (curContext & A) !== NoContext 

curContext與~A執(zhí)行按位與操作:

  1.   0000 0001  // curContext 
  2. & 1111 1110  // ~A 
  3. ----------- 
  4.   0000 0000 

即從curContext中移除A。

當(dāng)業(yè)務(wù)中需要同時(shí)處理多個(gè)狀態(tài)時(shí),可以使用如上位運(yùn)算技巧。

優(yōu)先級(jí)計(jì)算

在React中,不同情況下調(diào)用this.setState觸發(fā)的更新會(huì)擁有不同優(yōu)先級(jí)。優(yōu)先級(jí)之間的比較、挑選同樣使用了位運(yùn)算。

具體來(lái)說(shuō),React中用31個(gè)bit位保存「更新」(之所以是31而不是32是因?yàn)镮nt32的最高位是符號(hào)位,不保存具體的數(shù))。

處在越低bit位的更新優(yōu)先級(jí)越高(越需要優(yōu)先處理)。

舉個(gè)例子,假設(shè)當(dāng)前應(yīng)用存在2個(gè)更新:

  1. 0b000 0000 0000 0000 0000 0000 0001 0001 

其中第1位的更新優(yōu)先級(jí)最高(需要同步處理),第5位為默認(rèn)優(yōu)先級(jí)。

React經(jīng)常需要找出當(dāng)前最高優(yōu)先級(jí)的更新在哪一位(如上例子中在第一位),方法如下:

  1. function getHighestPriorityLane(lanes) { 
  2.   return lanes & -lanes; 

解釋下,由于Int32采用「補(bǔ)碼」表示,所以-lanes可以看作如下兩步操作:

  1. lanes取反(~lanes)
  2. 加1

為了直觀,用8位表示:

  1. lanes  0001 0001 
  2. ~lanes 1110 1110 // 第一步 
  3. +1     1110 1111 // 第二步 

則lanes & -lanes如下:

  1.   0001 0001 // lanes   
  2. & 1110 1111 // -lanes 
  3. ----------- 
  4.   0000 0001 

取到的就是第一位(已有更新中最高的優(yōu)先級(jí))。

總結(jié)

雖然業(yè)務(wù)中不常使用位操作,但在特定場(chǎng)景下位操作時(shí)很方便、高效的方式。

這波操作你愛(ài)了么?

 

責(zé)任編輯:姜華 來(lái)源: 魔術(shù)師卡頌
相關(guān)推薦

2023-04-26 07:46:22

React隱藏彩蛋

2020-10-27 07:51:12

Shell腳本日期

2022-04-14 11:50:39

函數(shù)組件hook

2024-01-26 08:06:43

2022-03-31 17:54:29

ReactHooks前端

2021-01-23 12:22:59

位運(yùn)算編程語(yǔ)言開(kāi)發(fā)

2022-05-18 16:06:15

位運(yùn)算異或運(yùn)算

2017-03-06 20:39:41

整潔代碼Clean Code

2021-02-21 06:36:57

運(yùn)算技巧按位

2023-04-07 08:02:54

源碼位邏輯運(yùn)算符

2020-10-21 08:38:47

React源碼

2014-08-14 10:12:45

SwiftNil Coalesc

2022-09-07 00:04:37

JavaScript運(yùn)算符技巧

2020-11-20 07:51:02

JavaSPI機(jī)制

2021-11-10 18:52:42

SQL技巧優(yōu)化

2022-04-07 12:13:22

技巧高可用單機(jī)版

2022-03-11 19:54:07

Svelte應(yīng)用程序JavaScript

2022-03-29 07:52:21

運(yùn)用技巧二分查找

2022-03-11 10:23:02

React性能優(yōu)化

2021-06-08 06:13:16

React開(kāi)發(fā)開(kāi)發(fā)技術(shù)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)