国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

index作為key是反模式

hightopo / 543人閱讀

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

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

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

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

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

It may break your application and display wrong data!

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

為了證明潛在的危險我創(chuàng)建了一個簡單示例

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

比較好

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

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

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

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

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

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

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

參考和相關(guān)文章

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91634.html

相關(guān)文章

  • 架構(gòu)思想之CAP原理

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

    Shisui 評論0 收藏0

  • 架構(gòu)思想之CAP原理

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

    Dr_Noooo 評論0 收藏0

  • 簡單基于spring的redis配置(單機(jī)和集群模式)

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

    Tychio 評論0 收藏0

  • 數(shù)組七十二變

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

    alexnevsky 評論0 收藏0

  • JavaScript數(shù)據(jù)結(jié)構(gòu)與算法-Sort-(leetcode原題)

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

    Hanks10100 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<