快捷導(dǎo)航

react為什么不推薦使用index作為key

更新時(shí)間：2021年07月22日 11:43:15 作者：JQ...

本文主要介紹了react為什么不推薦使用index作為key，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

1.舊的虛擬dom和新的虛擬dom對(duì)比，首先看他們的key是否相同
2.相同繼續(xù)對(duì)比他們的內(nèi)容，不同生成新的真實(shí)dom進(jìn)行替換
3.如果內(nèi)容和key都相同，復(fù)用舊的真實(shí)dom 不做改變

那么如果我們使用遍歷時(shí)候自動(dòng)生成的index作為每個(gè)節(jié)點(diǎn)的key可能會(huì)出現(xiàn)什么問(wèn)題呢？下面放個(gè)小案例

首先，初始時(shí)我們進(jìn)行遍歷persons

他會(huì)是這樣一個(gè)過(guò)程，源數(shù)據(jù)

persons: [
{ id: 1, name: “張三”, age: 15 },
{ id: 2, name: “李四”, age: 16 },
],

生成的真實(shí)dom節(jié)點(diǎn)

<ul>
      <li key="0">張三--15</li>
      <li key="1">李四--16</li>
    </ul>

然后我們?cè)谶@個(gè)名單前面插入一個(gè){id:3,name:‘王五',age:14}的數(shù)據(jù)會(huì)變成這樣子

<ul>
   <li key="0">王五--14</li>
      <li key="1">張三--15</li>
      <li key="2">李四--16</li>
    </ul>

通過(guò)上面的更新可以發(fā)現(xiàn) 王五將之前張三的key給占用了
也就是說(shuō)當(dāng)我進(jìn)行更新這一過(guò)程首先新的虛擬dom

<li key="0">王五--14</li>

和舊的虛擬dom

<li key="0">張三--15</li>

進(jìn)行比較新的dom先比較key兩人相同，在比較內(nèi)容一個(gè)是王五–14 一個(gè)是張三15 ,內(nèi)容發(fā)生變化了，這時(shí)就會(huì)進(jìn)行使用新的虛擬dom生成新的真是dom重新渲染頁(yè)面，而且不僅是之前的張三受影響需要重新生成，后面的李四也要被張三進(jìn)行替換在生成一個(gè)新的內(nèi)容為張三的真實(shí)dom，這樣就會(huì)導(dǎo)致所有的dom都要重新生成重新渲染，導(dǎo)致性能下降

<!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ò)上面的推導(dǎo)致，如果我們使用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>

這次雖然王五插入的還是張三的前面但是只對(duì)比了一次王五和上面是否有一樣的key=0的節(jié)點(diǎn) ，沒(méi)有生成新的真實(shí)dom進(jìn)行渲染，而張三和上面key=1的進(jìn)行對(duì)比，發(fā)現(xiàn)上面有一個(gè)key=1的節(jié)點(diǎn)，然后再對(duì)比他們的內(nèi)容是否相同，發(fā)現(xiàn)內(nèi)容也相同，那么就可以復(fù)用舊的真實(shí)dom，節(jié)約性能

到此這篇關(guān)于react為什么不推薦使用index作為key的文章就介紹到這了,更多相關(guān)react index作為key內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: