快捷導(dǎo)航

React中使用collections時key的重要性詳解

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

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

前言

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

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

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

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

現(xiàn)在, 我們在 react 中來 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>

然而, 實際 DOM 是這樣的

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

React 給出了以下warning

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

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

我們來看一個向 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é)果將會改變?nèi)缦?/p>

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

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

如何選擇 Key

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

使用 map 函數(shù)的 index 來作為元素的 key, 對開發(fā)者來說是常見的, 因為有時這是必要的, 然而, 有時這也會導(dǎo)致性能下降問題

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

還是以上的例子, 作了一點小小的改變后, React 瞬間由一個步驟變成了三個步驟:

總結(jié)

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

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

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频