React中使用collections時(shí)key的重要性詳解

更新時(shí)間：2017年08月07日 09:51:21 作者：楓上霧棋

這篇文章主要給大家介紹了關(guān)于在React.js中使用collections時(shí)key的重要性，注意：一定不能不能忘了key，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。

前言

大家應(yīng)該都知道，在 React 中 render collections 的 items 時(shí), Keys 扮演著重要的角色, 它直接決定接下來(lái)的 rendered 和 re-rendered，下面話不多說，來(lái)一起看看詳細(xì)的介紹：

React 不會(huì) render 重復(fù)的 keys

為了徹底明白這個(gè), 我們來(lái)聲明一個(gè)這樣的數(shù)組

const nums = [1, 2, 3, 5, 2]; // 它有兩個(gè)元素的值是相等的

現(xiàn)在, 我們?cè)?react 中來(lái) render

<ul>
 {nums.map(num => <li key={num}>{num}</li>)}
</ul>

這小段代碼構(gòu)造出的理想 element 結(jié)構(gòu), 應(yīng)該是這樣的

<ul>
 <li key="1">1</li>
 <li key="2">2</li>
 <li key="3">3</li>
 <li key="5">5</li>
 <li key="2">2</li>
</ul>

然而, 實(shí)際 DOM 是這樣的

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>5</li>
</ul>

React 給出了以下warning

意思就是, 你必須為數(shù)組中的元素提供唯一的 key 值

React 會(huì) re-render 某個(gè) key 指向的內(nèi)容發(fā)生變化的元素

我們來(lái)看一個(gè)向 users 集合添加 user 的例子

const users = [
 {username:'bob'},
 {username:'sue'}
];

users.map((u, i) =>
 <div key={u.username}>{u.username}</div>);

render 的結(jié)果如下

<div key="bob">bob</div>
<div key="sue">sue</div>

現(xiàn)在, 我們更新一下 users

const users = [
 {username:'joe'},
 {username:'bob'},
 {username:'sue'}
];

render 的結(jié)果將會(huì)改變?nèi)缦?/p>

<div key="joe">joe</div>
<div key="bob">bob</div>
<div key="sue">sue</div>

在上面例子中, React 調(diào)用了它的 Reconciliation 算法, 然后把返回的結(jié)果也就是一個(gè) key 為 sue 的新元素添加到了 users 的最前面

如何選擇 Key

其實(shí), 即使內(nèi)容沒有發(fā)生變化, 改變對(duì)應(yīng)的 key 值, React 也會(huì)觸發(fā) re-render.

使用 map 函數(shù)的 index 來(lái)作為元素的 key, 對(duì)開發(fā)者來(lái)說是常見的, 因?yàn)橛袝r(shí)這是必要的, 然而, 有時(shí)這也會(huì)導(dǎo)致性能下降問題

users.map((u, i) =>
 <div key={i}>{u.username}</div>);

還是以上的例子, 作了一點(diǎn)小小的改變后, React 瞬間由一個(gè)步驟變成了三個(gè)步驟:

總結(jié)

所以, 當(dāng)我們使用 collections 時(shí), 不僅不能忘了 Key, 還要學(xué)會(huì)選擇好的 Key.

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

国产无遮挡裸体免费直播视频,久久精品国产蜜臀av,动漫在线视频一区二区,欧亚日韩一区二区三区,久艹在线免费视频,国产精品美女网站免费,正在播放 97超级视频在线观看,斗破苍穹年番在线观看免费,51最新乱码中文字幕