日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
聊聊React源碼中的位運算技巧

[[428027]]

大家好，我卡頌。

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

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

作為業(yè)務(wù)依賴的框架，為了提升一點點運行時性能，React從不吝惜將源碼寫的很復(fù)雜。

[[428028]]

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

本文會講解其中比較有代表性的部分。學(xué)到之后，當(dāng)遇到類似場景時露一手，你就是業(yè)務(wù)線最靚的仔。

幾個常用位運算

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

在React中，主要用到3種位運算符 —— 按位與、按位或、按位非。

按位與(&)

對于兩個二進制操作數(shù)的每個bit，如果都為1，則結(jié)果為1，否則為0。

舉個例子，計算3 & 2，首先將操作數(shù)轉(zhuǎn)化為Int32：

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

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

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

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

按位或(|)

對于兩個二進制操作數(shù)的每個bit，如果都為0，則結(jié)果為0，否則為1。

計算10 | 3：

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

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

按位非(～)

對一個二進制操作數(shù)的每個bit，逐位進行取反操作(0、1互換)

對于～3，將3轉(zhuǎn)化為Int32后逐位取反：

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

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

如果你對這個結(jié)果有疑惑，可以去了解補碼相關(guān)知識

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

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

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

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

 
 
 
    
  
  
  
  1. // A上下文 
    2.   
  
  
  2. const A = 1; 
    3.   
  
  
  3. // B上下文 
    4.   
  
  
  4. const B = 2; 
    5.   
  
  
  5. // 沒有處在上下文 
    6.   
  
  
  6. const NoContext = 0; 
    7.

當(dāng)進入某個上下文時，可以使用按位或操作標(biāo)記進入：

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

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

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

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

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

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

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

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

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

即從curContext中移除A。

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

優(yōu)先級計算

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

具體來說，React中用31個bit位保存「更新」(之所以是31而不是32是因為Int32的最高位是符號位，不保存具體的數(shù))。

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

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

 
 
 
    
  
  
  
  1. 0b000 0000 0000 0000 0000 0000 0001 0001 
    2.

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

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

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

解釋下，由于Int32采用「補碼」表示，所以-lanes可以看作如下兩步操作：

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

為了直觀，用8位表示：

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

則lanes & -lanes如下：

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

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

總結(jié)

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

這波操作你愛了么?

 


文章標(biāo)題：聊聊React源碼中的位運算技巧
當(dāng)前鏈接：http://m.5511xx.com/article/dhhjpjj.html