index作為key是反模式

hightopo 發布于2019-08-22 11:01 / 551人閱讀

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

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

我曾多次看到開發者在渲染列表的時候把列表項的index作為它的key。

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

這看起來很優雅，而且能夠解決警告（這才是“真”問題，對吧？）的問題，這樣做有什么危險呢？

It may break your application and display wrong data!

讓我來解釋，key是React唯一用來確定DOM元素的東西，如果你想列表增加一項或移除中間的某項，會發生什么事？如果key和之前一個一樣React就會假定這個DOM元素和之前對應的組件是一個，但是它們可能并不是同一個了。

為了證明潛在的危險我創建了一個簡單示例

這表明，如果不指定key的時候React會使用index，因為這是那個時候最好的猜測，而且它會警告你說這不是最優解(它通過令人困惑的語句表述這個意思)。如果你主動提供了它，React就認為你知道你在干什么。記住這個示例，它能產生不可預測的結果。

比較好

像這樣的應該都有一個永久的唯一的屬性，當列表項創建的時候它是最合適被設置為key的，顯然我是在說id，我們可以用下面的方式使用它：

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

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

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

更好

一個產品級別的方案應該是一個更健壯的方法，能夠處理分散創建列表項。因此，我推薦使用shortid。它能夠快速生成“短無序 url友好唯一”的id，代碼像下面這樣：

var shortid = require("shortid");
function createNewTodo(text) {
  return {
    completed: false,
    id: shortid.generate(),
    text
  }
}

TL;DR:為每個列表項生成一個唯一的id，并在渲染列表的時候使用它作為key。

參考和相關文章

Dynamic Children and 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云服務器 Indexing index. index z index

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

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

架構思想之CAP原理

摘要：關系數據庫的模型擁有高一致性可用性很難進行分區原子性一個事務中所有操作都必須全部完成，要么全部不完成。由于自己負責后端的設計已經有一段時間，對設計的一些思想和理論有一些理解，但最近被問到什么是CAP時，卻一臉懵逼，下來后專門針對CAP架構思想進行了一些專題學習，在這里也將這個概念引入給大家，大家可以有意識地了解和學習這個思想理念，幫助自己在后續設計功能時有更好的參考。分布式領域C...

Shisui 2019-08-16 13:26 評論0 收藏0
架構思想之CAP原理

摘要：關系數據庫的模型擁有高一致性可用性很難進行分區原子性一個事務中所有操作都必須全部完成，要么全部不完成。由于自己負責后端的設計已經有一段時間，對設計的一些思想和理論有一些理解，但最近被問到什么是CAP時，卻一臉懵逼，下來后專門針對CAP架構思想進行了一些專題學習，在這里也將這個概念引入給大家，大家可以有意識地了解和學習這個思想理念，幫助自己在后續設計功能時有更好的參考。分布式領域C...

Dr_Noooo 2019-07-01 10:50 評論0 收藏0
簡單基于spring的redis配置(單機和集群模式)

摘要：優點是反序列化時不需要提供類型信息，但缺點是序列化后的結果非常龐大，是格式的倍左右，這樣就會消耗服務器的大量內存。使用庫將對象序列化為字符串。優點是速度快，序列化后的字符串短小精悍。需要的jar包：spring版本：4.3.6.RELEASE,jedis版本：2.9.0,spring-data-redis:1.8.0.RELEASE；如果使用jackson序列化的話還額外需要：jac...

Tychio 2019-08-16 15:12 評論0 收藏0
數組七十二變

摘要：方法返回的數組元素是調用的數組的一個子集。當數組中至少有一個元素調用判定函數返回，它就返回返回一個布爾值，當有一個元素符合條件就返回，否則返回和這兩個方法使用指定的函數將數組元素進行組合，生成單個值。會改變原數組的方法： push() 在尾部添加一個或多個元素，并返回數組長度 let arr = [1, 2, 3] arr.push(a, b) // 5 console.log...

alexnevsky 2019-08-23 10:54 評論0 收藏0
JavaScript數據結構與算法-Sort-(leetcode原題)

摘要：說明你可以假設數組中所有元素都是非負整數，且數值在位有符號整數范圍內。提示按奇偶排序數組給定一個非負整數數組，中一半整數是奇數，一半整數是偶數。對數組進行排序，以便當為奇數時，也是奇數當為偶數時，也是偶數。原博客地址：https://finget.github.io/2019... 排序 showImg(https://segmentfault.com/img/remote/146...

Hanks10100 2019-08-23 18:08 評論0 收藏0