React key值的作用和使用

ygyooo 發布于2019-08-23 11:26 / 3429人閱讀

摘要：主要是因為根據認為李四和王五是同一個組件李四和王五的值相同，導致第一個被渲染，后續的會被丟棄掉。所以，的值必須保證其唯一和穩定性

在react項目中總會遇到這樣一個的坑

這是警告數組遍歷子元素要有一個唯一的key值，但是key到底是什么，在代碼中到底起了什么作用？

key概述

react中的key屬性，它是一個特殊的屬性，它的出現不是給開發者用的（例如你為一個組件設置key之后，也仍無法獲取這個組件的key值），而是給react自己用的。
簡單來說，react利用key來識別組件，它是一種身份標識標識，就像我們的身份證用來辨識一個人一樣。每個key對應一個組件，相同的key react認為是同一個組件，這樣后續相同的key對應組件都不會被創建。

key的使用場景

在項目開發中，key屬性的使用場景最多的還是由數組動態創建的子組件的情況，需要為每個子組件添加唯一的key屬性值。那會有的人就會自然而然想到，key和動態渲染的子元素獲取的index位置的值很接近，那不是可以直接用index附上key的值呢key={index}?

例如：
{dataList.map((item,index)=>{
        return {item.name}
        })
}

在你嘗試過后會發現，報錯沒了，渲染也沒問題不是很正常嘛？！但是強烈不推薦用數組index來作為key。
如果數據更新僅僅是數組重新排序或在其中間位置插入新元素，那么視圖元素都將重新渲染。

例如：
本來index=2的元素向前移動后，那該元素的key不也同樣發生了改變那這樣會改變的Key就沒有任何的存在意義，既然是作為“身份證”一樣的存在，那就不容有失。當然，在你用key值創建子組件的時候，若數組的內容只是作為純展示，而不涉及到數組的動態變更，其實是可以使用index作為key的。

key的值必須保證唯一且穩定

我在與Key值打過幾次交道過后，覺得key值就類似于數據庫中的主鍵id一樣，有且唯一。

//this.state.users內容。注意：李四和王五的id相同！！！
this.state = {
 users: [{id:1,name: "張三"}, {id:2, name: "李四"}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  
    用戶列表
    {this.state.users.map(u => {u.id}:{u.name})}
  
 )
);

注意以上范例中，動態渲染的數據中，key以數據的id來定，而李四、王五的id相同而導致Key的雷同，最后的渲染結果為張三和李四，王五并沒有展示出來。主要是因為 react根據key認為李四和王五是同一個組件（李四和王五的key值相同），導致第一個被渲染，后續的會被丟棄掉。

這樣，有了key屬性后，就可以與組件建立了一種對應關系，react根據key來決定是銷毀重新創建組件還是更新組件。

并且，Key也要保證值的穩定性，例如：

{dataList.map((item,index)=>{
        return {item.name}
        })
}

尤其如以上范例中所示，key的值以Math.random()隨機生成而定，這使得數組元素中的每項都重新銷毀然后重新創建，有一定的性能開銷；另外可能導致一些意想不到的問題出現。

所以，Key的值必須保證其唯一和穩定性

GPU云服務器云服務器 react使用webrtc 使用代理服務器作用是功能和作用的區別 ip地址和域名的作用

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

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

[React技術內幕] key帶來了什么

摘要：啟發式算法了解一下什么是啟發式算法啟發式算法指人在解決問題時所采取的一種根據經驗規則進行發現的方法。這將會造成極大的性能損失和組件內的丟失。但這都是的內部實現方式，可能在后序的版本中不斷細化啟發式算法，甚至采用別的啟發式算法。　　首先歡迎大家關注我的掘金賬號和Github博客，也算是對我的一點鼓勵，畢竟寫東西沒法獲得變現，能堅持下去也是靠的是自己的熱情和大家的鼓勵。　　大家在使用R...

cnTomato 2019-08-20 19:08 評論0 收藏0
React組件性能優化：PureRender和Immutable Data

摘要：插件允許我們在的語法中使用在傳遞數據時，可以通過進一步提升組件的渲染性能，是針對可變對象和不可變對象所做的折衷。使用之后，僅僅改變狀態了的組件及其父組件被重新渲染。 1 前言網頁性能最大的限制因素是瀏覽器重繪(reflow)和重排版(repaint)，React的虛擬DOM就是為了盡可能減少瀏覽器的重繪和重排版，從React的渲染過程看，避免不必要的渲染可以進一步提高性能。 2 Pu...

megatron 2019-08-20 14:42 評論0 收藏0
MobX

摘要：建議將它們用于修改可觀察量或具有副作用的任何函數中。這意味著在一些定時器或者網絡請求，異步處理的情況下，它們的回調函數無法對狀態做成改變。這些回調函數都應該有包裹，如果例子里面的一樣。 1. 介紹 1.1. 原理 React的render是狀態轉化為樹狀結構的渲染組件的方法而MobX提供了一種存儲，更新狀態的方法 React 和 MobX都在優化著軟件開發中相同的問題。 ...

Alliot 2019-08-20 14:06 評論0 收藏0
從react-start到co源碼(三)

摘要：第三篇腳手架依賴的核心庫的源碼解析。該篇是這個系列文章的第三篇主要是對的源碼進行分析講解。的源碼十分簡單但實現的功能卻是十分的強大。源碼概括源碼主要包含了兩部分公共方法和私有方法。 react作為當前十分流行的前端框架，相信很多前端er都有蠢蠢欲動的學習它的想法。工欲善其事，必先利其器。這篇文章就簡單的給大家介紹一下如何我快速的搭建一個react前端開發環境。主要針對于react小白，...

wind5o 2019-08-20 13:55 評論0 收藏0
Mobx4.X狀態管理入門

摘要：前言原本說接下來會專注學但是最新工作又學習了一些有意思的庫於是就再寫下來做個簡單的入門之前我寫過一篇文章這個也算是作為一個補充吧這次無非就是類似筆記把認為的一些關鍵點記下來有些地方還沒用到就衹是描述一下代碼有些自己寫的有些文檔寫的很好就搬下前言原本說接下來會專注學nodejs,但是最新工作又學習了一些有意思的庫,於是就再寫下來做個簡單的入門,之前我寫過一篇文章,這個也算是作為一個補...

CKJOKER 2019-08-26 10:36 評論0 收藏0