一、引言與核心結(jié)論1.1 問題背景在React開發(fā)中當(dāng)我們使用map方法渲染列表時(shí)控制臺經(jīng)常會拋出警告:Warning: Each child in a list should have a unique key prop.。這引發(fā)了一個常見的疑問:React的keys是否需要設(shè)置為全局唯一?為什么?很多開發(fā)者為了消除警告可能會嘗試生成UUID或者全局唯一的標(biāo)識符但這真的有必要嗎?1.2 核心結(jié)論明確地說React的keys不需要設(shè)置為全局唯一。React官方文檔明確指出key在兄弟節(jié)點(diǎn)中必須是唯一的但不需要全局唯一。理解這一點(diǎn)對于優(yōu)化React渲染性能和避免不必要的Bug至關(guān)重要。二、React diffing算法與key的作用機(jī)制2.1 虛擬DOM的diffing過程React通過虛擬DOM和diffing算法來高效更新真實(shí)DOM。當(dāng)組件狀態(tài)發(fā)生變化時(shí)React會生成新的虛擬DOM樹并與舊樹進(jìn)行對比。為了將復(fù)雜度從O(n^3)降低到O(n)React基于兩個假設(shè)進(jìn)行了優(yōu)化:不同類型的元素會產(chǎn)生不同的樹。開發(fā)者可以通過key屬性來暗示哪些子元素在不同渲染下是穩(wěn)定的。是否是否狀態(tài)更新生成新虛擬DOM樹Diffing算法對比同層節(jié)點(diǎn)類型是否相同?比較屬性并更新銷毀舊節(jié)點(diǎn)并創(chuàng)建新節(jié)點(diǎn)遞歸對比子節(jié)點(diǎn)子節(jié)點(diǎn)是否有key?根據(jù)key匹配新舊子節(jié)點(diǎn)按索引順序匹配復(fù)用節(jié)點(diǎn)并更新差異渲染完成2.2 key在列表渲染中的角色在沒有key的情況下React默認(rèn)使用索引來追蹤列表項(xiàng)。如果列表發(fā)生插入、刪除或重排操作索引會發(fā)生變化導(dǎo)致React錯誤地復(fù)用組件狀態(tài)進(jìn)而引發(fā)界面渲染異常。key的作用就是為React提供一個穩(wěn)定的身份標(biāo)識幫助其識別哪些元素發(fā)生了改變、被添加或被移除。2.3 兄弟節(jié)點(diǎn)間的唯一性原則React的diffing算法是同層比較的。這意味著React只會將同一層級的兄弟節(jié)點(diǎn)進(jìn)行對比。因此key的唯一性約束僅限于同一父節(jié)點(diǎn)下的兄弟節(jié)點(diǎn)之間。只要在同一個數(shù)組或同一父級下每個元素的key互不相同即可。三、為什么不需要全局唯一3.1 diffing算法的作用域分析由于diffing算法是按層級執(zhí)行的兩個不同父節(jié)點(diǎn)下的子節(jié)點(diǎn)永遠(yuǎn)不會被相互比較。例如一個組件的Sidebar列表和MainContent列表中都可以存在key1的元素React在diffing時(shí)會在各自的父級作用域內(nèi)進(jìn)行匹配互不干擾。3.2 全局唯一帶來的性能開銷如果強(qiáng)制要求key全局唯一開發(fā)者可能會傾向于使用UUID等長字符串。這不僅會增加生成key的計(jì)算開銷還會導(dǎo)致虛擬DOM對比時(shí)字符串比較的時(shí)間增加。更重要的是這違背了React設(shè)計(jì)key的初衷:在局部上下文中提供穩(wěn)定的身份標(biāo)識。3.3 局部唯一性證明我們可以通過一個簡單的代碼示例來證明局部唯一性是有效的:function App() { return ( div ul li key1菜單項(xiàng)1/li li key2菜單項(xiàng)2/li /ul ol li key1列表項(xiàng)1/li li key2列表項(xiàng)2/li /ol /div ); }在上述代碼中ul和ol下的li都使用了相同的key但由于它們處于不同的兄弟作用域React能完美地進(jìn)行區(qū)分和渲染不會拋出任何警告。四、錯誤使用key的常見場景與規(guī)避4.1 使用數(shù)組index作為key的隱患當(dāng)列表是靜態(tài)的、不進(jìn)行排序或過濾操作時(shí)使用index作為key似乎沒有問題。但一旦列表項(xiàng)被重新排序或增刪index就會改變導(dǎo)致React錯誤地復(fù)用組件狀態(tài)。例如在一個可編輯的列表中刪除第一項(xiàng)原本的第二項(xiàng)變成了第一項(xiàng)React會認(rèn)為第一項(xiàng)依然存在只是文本變了這可能導(dǎo)致輸入框的殘留狀態(tài)錯亂。4.2 隨機(jī)數(shù)作為key的負(fù)面影響有些開發(fā)者為了追求絕對唯一使用Math.random()或時(shí)間戳作為key。這是極其錯誤的做法。因?yàn)槊看武秩緯r(shí)key都會變化React會認(rèn)為這是一個全新的元素從而觸發(fā)舊元素的銷毀和新元素的創(chuàng)建。這不僅喪失了React復(fù)用DOM的能力還會導(dǎo)致嚴(yán)重的性能問題。4.3 正確的key生成策略與最佳實(shí)踐針對React的keys是否需要設(shè)置為全局唯一?為什么?這一問題最佳實(shí)踐如下:如果數(shù)據(jù)源來自數(shù)據(jù)庫直接使用數(shù)據(jù)的唯一主鍵(如id)作為key。如果數(shù)據(jù)是前端生成的確保在生成數(shù)據(jù)時(shí)賦予其一個穩(wěn)定的唯一標(biāo)識。僅在列表完全不進(jìn)行動態(tài)變化的情況下才考慮使用index作為key。始終保持key在兄弟節(jié)點(diǎn)中的唯一性和穩(wěn)定性而不是追求全局唯一。