- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) > JavaScript >
- react為什么不推薦使用index作為key
1.舊的虛擬dom和新的虛擬dom對比，首先看他們的key是否相同
2.相同繼續對比他們的內容，不同生成新的真實(shí)dom進(jìn)行替換
3.如果內容和key都相同，復用舊的真實(shí)dom 不做改變
那么如果我們使用遍歷時(shí)候自動(dòng)生成的index作為每個(gè)節點(diǎn)的key可能會(huì )出現什么問(wèn)題呢？ 下面放個(gè)小案例
首先，初始時(shí)我們進(jìn)行遍歷persons
他會(huì )是這樣一個(gè)過(guò)程，源數據
persons: [
{ id: 1, name: “張三”, age: 15 },
{ id: 2, name: “李四”, age: 16 },
],
生成的真實(shí)dom節點(diǎn)
<ul>
<li key="0">張三--15</li>
<li key="1">李四--16</li>
</ul>
然后我們在這個(gè)名單前面插入一個(gè){id:3,name:‘王五',age:14}的數據會(huì )變成這樣子
<ul>
<li key="0">王五--14</li>
<li key="1">張三--15</li>
<li key="2">李四--16</li>
</ul>
通過(guò)上面的更新可以發(fā)現 王五將之前張三的key給占用了
也就是說(shuō)當我進(jìn)行更新這一過(guò)程首先新的虛擬dom
<li key="0">王五--14</li>
和舊的虛擬dom
<li key="0">張三--15</li>
進(jìn)行比較 新的dom先比較key兩人相同，在比較內容一個(gè)是王五–14 一個(gè)是張三15 ,內容發(fā)生變化了，這時(shí)就會(huì )進(jìn)行使用新的虛擬dom生成新的真是dom重新渲染頁(yè)面，而且不僅是之前的張三受影響需要重新生成，后面的李四也要被張三進(jìn)行替換在生成一個(gè)新的內容為張三的真實(shí)dom，這樣就會(huì )導致所有的dom都要重新生成重新渲染，導致性能下降
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<div id="root"></div>
<script type="text/babel">
let root = document.getElementById("root");
class App extends React.Component {
constructor(props) {
super(props);
}
state = {
persons: [
{ id: 1, name: "張三", age: 15 },
{ id: 2, name: "李四", age: 16 },
],
};
handle = () => {
const { persons } = this.state;
const p = {
id: 0,
name: "王五",
age: 14,
};
this.setState({
persons: [p, ...persons],
});
};
render() {
return (
<div>
<button onClick={this.handle}>點(diǎn)擊添加</button>
<ul>
{this.state.persons.map((person, index) => (
<li key={index}>
{person.name}--{person.age}
</li>
))}
</ul>
</div>
);
}
}
ReactDOM.render(<App name="hell" />, root);
</script>
</body>
</html>
試想一下經(jīng)過(guò)上面的推導致，如果我們使用id作為唯一的key值會(huì )怎么樣呢
更新前
<ul>
<li key="1">張三--15</li>
<li key="2">李四--16</li>
</ul>
更新后
<ul>
<li key="0">王五--14</li>
<li key="1">張三--15</li>
<li key="2">李四--16</li>
</ul>
這次 雖然王五插入的還是張三的前面但是只對比了一次 王五和上面是否有一樣的key=0的節點(diǎn) ，沒(méi)有生成新的真實(shí)dom進(jìn)行渲染，而張三和上面key=1的進(jìn)行對比，發(fā)現上面有一個(gè)key=1的節點(diǎn)，然后再對比他們的內容是否相同，發(fā)現內容也相同，那么就可以復用舊的真實(shí)dom，節約性能
到此這篇關(guān)于react為什么不推薦使用index作為key的文章就介紹到這了,更多相關(guān)react index作為key內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自本網(wǎng)站內容采集于網(wǎng)絡(luò )互聯(lián)網(wǎng)轉載等其它媒體和分享為主，內容觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如侵犯了原作者的版權，請告知一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容，聯(lián)系我們QQ:712375056，同時(shí)歡迎投稿傳遞力量。
Copyright ? 2009-2022 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 特網(wǎng)科技 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 百度云 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
