成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

react反模式之index作為key

sevi_stuo / 2230人閱讀

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

react反模式之index作為key 
原文：Index as a key is an anti-pattern

我已經(jīng)看到過很多React開發(fā)人員在渲染一個(gè)列表時(shí)使用index作為它的key

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

這樣寫看起來很優(yōu)雅并且確實(shí)擺脫了react的警告信息，那么這樣寫有危險(xiǎn)的地方嗎？


??這樣會(huì)破壞你的應(yīng)用讓其顯示出錯(cuò)誤的數(shù)據(jù)

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

這里我有個(gè)簡(jiǎn)單的例子來演示這個(gè)潛在的危險(xiǎn)源碼

事實(shí)證明，React 會(huì)用index作為默認(rèn)的key的值因?yàn)檫@個(gè)時(shí)候React認(rèn)為用index是最合理的。因此，React會(huì)警告你那樣做是為達(dá)標(biāo)準(zhǔn)的（這樣說看起來有點(diǎn)困惑. 如果你自己提供了key屬性React會(huì)認(rèn)為你知道自己在做啥. 記住這個(gè)例子，它可能會(huì)導(dǎo)致錯(cuò)誤。

Better

列表里面的每一項(xiàng)都應(yīng)該又一個(gè)永久并且唯一的屬性，理想情況下應(yīng)該在創(chuàng)建列表的時(shí)候分配下去. 當(dāng)然我指的是id. 我們可以像下面這樣使用它:

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

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

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

一個(gè)產(chǎn)品化的解決方案是它應(yīng)該更加健壯，能夠用來創(chuàng)建分散的列表項(xiàng). 因此我強(qiáng)烈推薦一個(gè)npm包shortid, 它可以快速的生成一系列‘短的 無序的 對(duì)url友好的 唯一的’ id，下面是示例代碼:

var shortid = require("shortid");

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

TL;DR: 為每個(gè)列表項(xiàng)生成一個(gè)唯一的id，然后在渲染列表項(xiàng)時(shí)作為key屬性傳給列表項(xiàng).

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86625.html

相關(guān)文章

  • index作為key是反模式

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

    hightopo 評(píng)論0 收藏0

  • 4、React組件之性能優(yōu)化

    摘要：組件的性能優(yōu)化高德納我們應(yīng)該忘記忽略很小的性能優(yōu)化，可以說的情況下，過早的優(yōu)化是萬惡之源，而我們應(yīng)該關(guān)心對(duì)性能影響最關(guān)鍵的另外的代碼。對(duì)多個(gè)組件的性能優(yōu)化當(dāng)一個(gè)組件被裝載更新和卸載時(shí)，組件的一序列生命周期函數(shù)會(huì)被調(diào)用。 React組件的性能優(yōu)化 高德納: 我們應(yīng)該忘記忽略很小的性能優(yōu)化，可以說97%的情況下，過早的優(yōu)化是萬惡之源，而我們應(yīng)該關(guān)心對(duì)性能影響最關(guān)鍵的另外3%的代碼。...

    陳偉 評(píng)論0 收藏0

  • 【譯】你可能不需要派生狀態(tài)

    摘要：所有派生狀態(tài)導(dǎo)致的問題無異于兩種無條件的根據(jù)來更新無論和是否匹配來更新。派生狀態(tài)最常見的錯(cuò)誤就是將這兩者混和在一起。因此通常被用于性能優(yōu)化而不是來判斷派生狀態(tài)的正確性。我們可以使用派生狀態(tài)來存儲(chǔ)過濾列表這種方式避免了重新計(jì)算。 原文鏈接：https://reactjs.org/blog/2018... 翻譯這篇文章的起因是因?yàn)樵谝淮涡枨蟮绣e(cuò)誤的使用了getDerivedState...

    dinfer 評(píng)論0 收藏0

  • You Probably Dont Need Derived State

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

    URLOS 評(píng)論0 收藏0

  • React系列之 Redux 架構(gòu)模式

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

    xfee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<