react反模式之index作為key

sevi_stuo 發布于2019-08-21 11:22 / 2206人閱讀

摘要：反模式之作為原文我已經看到過很多開發人員在渲染一個列表時使用作為它的這樣寫看起來很優雅并且確實擺脫了的警告信息，那么這樣寫有危險的地方嗎這樣會破壞你的應用讓其顯示出錯誤的數據下面我來解釋下，是來識別元素的唯一屬性。

react反模式之index作為key

原文：Index as a key is an anti-pattern

我已經看到過很多React開發人員在渲染一個列表時使用index作為它的key

{todos.map((todo, index) => 
    
)}

這樣寫看起來很優雅并且確實擺脫了react的警告信息，那么這樣寫有危險的地方嗎？

??這樣會破壞你的應用讓其顯示出錯誤的數據

下面我來解釋下，key是React來識別DOM元素的唯一屬性。如果你往數組里面增加一些元素或者從數組中間移除一些東西會發生些什么呢？如果key屬性和以前一樣React會認為DOM元素表示的組件和以前是一樣的，但是那是錯誤的。

這里我有個簡單的例子來演示這個潛在的危險源碼

事實證明，React 會用index作為默認的key的值因為這個時候React認為用index是最合理的。因此，React會警告你那樣做是為達標準的（這樣說看起來有點困惑. 如果你自己提供了key屬性React會認為你知道自己在做啥. 記住這個例子，它可能會導致錯誤。

Better

列表里面的每一項都應該又一個永久并且唯一的屬性，理想情況下應該在創建列表的時候分配下去. 當然我指的是id. 我們可以像下面這樣使用它:

{todos.map((todo) => 
    
)}

另外的實現方式是把編號遞增添加到抽象方法中，使用一個全局的index來確保任何兩個列表項的id不同。

todoCounter = 1;
function createNewTodo(text) {
    return {
        completed: false,
        id: todoCounter++,
        text
    }
}

Much better

一個產品化的解決方案是它應該更加健壯，能夠用來創建分散的列表項. 因此我強烈推薦一個npm包shortid, 它可以快速的生成一系列‘短的無序的對url友好的唯一的’ id，下面是示例代碼:

var shortid = require("shortid");

function createNewTodo(text) {
    return {
        completed: false,
        id: shortid.generate(),
        text
    }
}

TL;DR: 為每個列表項生成一個唯一的id，然后在渲染列表項時作為key屬性傳給列表項.

References and related articles

. Dynamic Childrenand Keyed Fragments in React Docs
. Explanation from Paul O’Shannessy
. The importance of component keys in React.js
. React.js and Dynamic Children?—?Why the Keys are Important

云服務器 GPU云服務器 Java設計模式之（五）——代理模式 Indexing index. index

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86625.html

index作為key是反模式

摘要：原文我曾多次看到開發者在渲染列表的時候把列表項的作為它的。更好一個產品級別的方案應該是一個更健壯的方法，能夠處理分散創建列表項。它能夠快速生成短無序友好唯一的，代碼像下面這樣為每個列表項生成一個唯一的，并在渲染列表的時候使用它作為。原文：Index as a key is an anti-pattern 我曾多次看到開發者在渲染列表的時候把列表項的index作為它的key。 {tod...

hightopo 2019-08-22 11:01 評論0 收藏0
4、React組件之性能優化

摘要：組件的性能優化高德納我們應該忘記忽略很小的性能優化，可以說的情況下，過早的優化是萬惡之源，而我們應該關心對性能影響最關鍵的另外的代碼。對多個組件的性能優化當一個組件被裝載更新和卸載時，組件的一序列生命周期函數會被調用。 React組件的性能優化高德納: 我們應該忘記忽略很小的性能優化，可以說97%的情況下，過早的優化是萬惡之源，而我們應該關心對性能影響最關鍵的另外3%的代碼。...

陳偉 2019-08-22 15:01 評論0 收藏0
【譯】你可能不需要派生狀態

摘要：所有派生狀態導致的問題無異于兩種無條件的根據來更新無論和是否匹配來更新。派生狀態最常見的錯誤就是將這兩者混和在一起。因此通常被用于性能優化而不是來判斷派生狀態的正確性。我們可以使用派生狀態來存儲過濾列表這種方式避免了重新計算。原文鏈接：https://reactjs.org/blog/2018... 翻譯這篇文章的起因是因為在一次需求迭代中錯誤的使用了getDerivedState...

dinfer 2019-08-23 13:39 評論0 收藏0
You Probably Dont Need Derived State

摘要：同時，我們意識到人們對于這兩個鉤子函數的使用有許多誤解，也發現了一些造成這些晦澀的反模式。注意事項本文提及的所有反模式案例面向舊鉤子函數和新鉤子函數。因此，用這兩個鉤子函數來無條件消除是不安全的。原文鏈接：https://reactjs.org/blog/2018...React 16.4包含了一個getDerivedStateFromProps的 bug 修復：曾帶來一些 Reac...

URLOS 2019-08-23 10:26 評論0 收藏0
React系列之 Redux 架構模式

摘要：原文地址沒想到這篇文章這么晚才出，最近發生了太多的事情，已致于心態全無，最終也離開了現在的公司，沒想到是這么的狼狽一個人的光芒可以放到很大也可以小到微乎其微，如果不能好好的規劃最終也只能默默的承受世上沒有相同的感同身受，感受真實才能真正的原文地址：https://gmiam.com/post/react-... 沒想到這篇文章這么晚才出，最近發生了太多的事情，已致于心態全無，最終也離...

xfee 2019-08-20 12:06 評論0 收藏0