- React進(jìn)階之路
- 徐超
- 439字
- 2019-12-06 16:33:38
2.4 列表和Keys
在組件中渲染列表數(shù)據(jù)是非常常見的場(chǎng)景,例如,BBS項(xiàng)目PostList組件就需要根據(jù)列表數(shù)據(jù)posts進(jìn)行渲染:

下面運(yùn)行BBS項(xiàng)目,然后打開Chrome瀏覽器的控制臺(tái),可以看到如圖2-5所示的警告信息。

圖2-5
警告信息提示我們,應(yīng)該為列表中的每個(gè)元素添加一個(gè)名為key的屬性。那么這個(gè)屬性有什么作用呢?原來,React使用key屬性來標(biāo)記列表中的每個(gè)元素,當(dāng)列表數(shù)據(jù)發(fā)生變化時(shí),React就可以通過key知道哪些元素發(fā)生了變化,從而只重新渲染發(fā)生變化的元素,提高渲染效率。
一般使用列表數(shù)據(jù)的ID作為key值,例如可以使用帖子的ID作為每一個(gè)PostItem的key:

再次運(yùn)行程序,你會(huì)發(fā)現(xiàn)之前的警告消息已經(jīng)不存在了。本節(jié)項(xiàng)目源代碼的目錄為/chapter-02/bbs-components-keys。
如果列表包含的元素沒有ID,也可以使用元素在列表中的位置索引作為key值,例如:

但并不推薦使用索引作為key,因?yàn)橐坏┝斜碇械臄?shù)據(jù)發(fā)生重排,數(shù)據(jù)的索引也會(huì)發(fā)生變化,不利于React的渲染優(yōu)化。我們還會(huì)在第5章中詳細(xì)說明這一情況。
雖然列表元素的key不能重復(fù),但這個(gè)唯一性僅限于在當(dāng)前列表中,而不是全局唯一。例如在一個(gè)組件中兩次使用post.id作為列表數(shù)據(jù)的key:

- 5G通信系統(tǒng)定位技術(shù)原理與方法
- WebRTC音視頻開發(fā):React+Flutter+Go實(shí)戰(zhàn)
- 電子線路
- 加權(quán)分?jǐn)?shù)傅里葉變換及其在通信系統(tǒng)中的應(yīng)用
- 電子技術(shù)工程訓(xùn)練
- 移動(dòng)通信中繼覆蓋系統(tǒng)設(shè)備與工程設(shè)計(jì)
- 光傳送網(wǎng)(OTN)技術(shù)的原理與測(cè)試
- 通信員指導(dǎo)手冊(cè)
- 動(dòng)手指,知天下:老年人學(xué)用智能手機(jī)
- GPRS網(wǎng)絡(luò)信令實(shí)例詳解
- 光電定位與光電對(duì)抗
- 物聯(lián)網(wǎng)
- DSP技術(shù)與應(yīng)用
- LTE-V2X測(cè)試與仿真從入門到精通
- 電子元器件及其應(yīng)用