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