成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

React key值的作用和使用

ygyooo / 3468人閱讀

摘要：主要是因?yàn)楦鶕?jù)認(rèn)為李四和王五是同一個(gè)組件李四和王五的值相同，導(dǎo)致第一個(gè)被渲染，后續(xù)的會(huì)被丟棄掉。所以，的值必須保證其唯一和穩(wěn)定性

在react項(xiàng)目中總會(huì)遇到這樣一個(gè)的坑

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

key概述

react中的key屬性，它是一個(gè)特殊的屬性，它的出現(xiàn)不是給開發(fā)者用的（例如你為一個(gè)組件設(shè)置key之后，也仍無(wú)法獲取這個(gè)組件的key值），而是給react自己用的。
簡(jiǎn)單來(lái)說(shuō)，react利用key來(lái)識(shí)別組件，它是一種身份標(biāo)識(shí)標(biāo)識(shí)，就像我們的身份證用來(lái)辨識(shí)一個(gè)人一樣。每個(gè)key對(duì)應(yīng)一個(gè)組件，相同的key react認(rèn)為是同一個(gè)組件，這樣后續(xù)相同的key對(duì)應(yīng)組件都不會(huì)被創(chuàng)建。

key的使用場(chǎng)景

在項(xiàng)目開發(fā)中，key屬性的使用場(chǎng)景最多的還是由數(shù)組動(dòng)態(tài)創(chuàng)建的子組件的情況，需要為每個(gè)子組件添加唯一的key屬性值。那會(huì)有的人就會(huì)自然而然想到，key和動(dòng)態(tài)渲染的子元素獲取的index位置的值很接近，那不是可以直接用index附上key的值呢key={index}?

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

        })
}

在你嘗試過(guò)后會(huì)發(fā)現(xiàn)，報(bào)錯(cuò)沒(méi)了，渲染也沒(méi)問(wèn)題不是很正常嘛？！但是強(qiáng)烈不推薦用數(shù)組index來(lái)作為key。
如果數(shù)據(jù)更新僅僅是數(shù)組重新排序或在其中間位置插入新元素，那么視圖元素都將重新渲染。

例如：
本來(lái)index=2的元素向前移動(dòng)后，那該元素的key不也同樣發(fā)生了改變那這樣會(huì)改變的Key就沒(méi)有任何的存在意義，既然是作為“身份證”一樣的存在，那就不容有失。當(dāng)然，在你用key值創(chuàng)建子組件的時(shí)候，若數(shù)組的內(nèi)容只是作為純展示，而不涉及到數(shù)組的動(dòng)態(tài)變更，其實(shí)是可以使用index作為key的。

key的值必須保證唯一且穩(wěn)定

我在與Key值打過(guò)幾次交道過(guò)后，覺(jué)得key值就類似于數(shù)據(jù)庫(kù)中的主鍵id一樣，有且唯一。

//this.state.users內(nèi)容。注意：李四和王五的id相同?。?！
this.state = {
 users: [{id:1,name: "張三"}, {id:2, name: "李四"}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  

    
用戶列表

    {this.state.users.map(u => 
{u.id}:{u.name}
)}
  

 )
);

注意以上范例中，動(dòng)態(tài)渲染的數(shù)據(jù)中，key以數(shù)據(jù)的id來(lái)定，而李四、王五的id相同而導(dǎo)致Key的雷同，最后的渲染結(jié)果為張三和李四，王五并沒(méi)有展示出來(lái)。主要是因?yàn)?react根據(jù)key認(rèn)為李四和王五是同一個(gè)組件（李四和王五的key值相同），導(dǎo)致第一個(gè)被渲染，后續(xù)的會(huì)被丟棄掉。

這樣，有了key屬性后，就可以與組件建立了一種對(duì)應(yīng)關(guān)系，react根據(jù)key來(lái)決定是銷毀重新創(chuàng)建組件還是更新組件。

并且，Key也要保證值的穩(wěn)定性，例如：

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

        })
}

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

所以，Key的值必須保證其唯一和穩(wěn)定性

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/96969.html

相關(guān)文章

  • [React技術(shù)內(nèi)幕] key帶來(lái)了什么

    摘要：?jiǎn)l(fā)式算法了解一下什么是啟發(fā)式算法啟發(fā)式算法指人在解決問(wèn)題時(shí)所采取的一種根據(jù)經(jīng)驗(yàn)規(guī)則進(jìn)行發(fā)現(xiàn)的方法。這將會(huì)造成極大的性能損失和組件內(nèi)的丟失。但這都是的內(nèi)部實(shí)現(xiàn)方式，可能在后序的版本中不斷細(xì)化啟發(fā)式算法，甚至采用別的啟發(fā)式算法。 　　首先歡迎大家關(guān)注我的掘金賬號(hào)和Github博客，也算是對(duì)我的一點(diǎn)鼓勵(lì)，畢竟寫東西沒(méi)法獲得變現(xiàn)，能堅(jiān)持下去也是靠的是自己的熱情和大家的鼓勵(lì)。 　　大家在使用R...

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

  • React組件性能優(yōu)化：PureRender和Immutable Data

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

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

  • MobX

    摘要：建議將它們用于修改可觀察量或具有副作用的任何函數(shù)中。這意味著在一些定時(shí)器或者網(wǎng)絡(luò)請(qǐng)求，異步處理的情況下，它們的回調(diào)函數(shù)無(wú)法對(duì)狀態(tài)做成改變。這些回調(diào)函數(shù)都應(yīng)該有包裹，如果例子里面的一樣。 1. 介紹 1.1. 原理 React的render是 狀態(tài) 轉(zhuǎn)化為樹狀結(jié)構(gòu)的渲染組件的方法 而MobX提供了一種存儲(chǔ)，更新 狀態(tài) 的方法 React 和 MobX都在優(yōu)化著軟件開發(fā)中相同的問(wèn)題。 ...

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

  • 從react-start到co源碼(三)

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

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

  • Mobx4.X狀態(tài)管理入門

    摘要：前言原本說(shuō)接下來(lái)會(huì)專注學(xué)但是最新工作又學(xué)習(xí)了一些有意思的庫(kù)於是就再寫下來(lái)做個(gè)簡(jiǎn)單的入門之前我寫過(guò)一篇文章這個(gè)也算是作為一個(gè)補(bǔ)充吧這次無(wú)非就是類似筆記把認(rèn)為的一些關(guān)鍵點(diǎn)記下來(lái)有些地方還沒(méi)用到就衹是描述一下代碼有些自己寫的有些文檔寫的很好就搬下 前言 原本說(shuō)接下來(lái)會(huì)專注學(xué)nodejs,但是最新工作又學(xué)習(xí)了一些有意思的庫(kù),於是就再寫下來(lái)做個(gè)簡(jiǎn)單的入門,之前我寫過(guò)一篇文章,這個(gè)也算是作為一個(gè)補(bǔ)...

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

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

0條評(píng)論

閱讀需要支付1元查看
<