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

Posted on by

1.舊的虛擬dom和新的虛擬dom對比，首先看他們的key是否相同
2.相同繼續對比他們的內容，不同生成新的真實dom進行替換
3.如果內容和key都相同，復用舊的真實dom 不做改變

那麼如果我們使用遍歷時候自動生成的index作為每個節點的key可能會出現什麼問題呢？ 下面放個小案例

首先，初始時我們進行遍歷persons

他會是這樣一個過程，源數據 

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

生成的真實dom節點 

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

然後我們在這個名單前面插入一個{id:3,name:‘王五’,age:14}的數據會變成這樣子 

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

通過上面的更新可以發現 王五將之前張三的key給占用瞭
也就是說當我進行更新這一過程首先新的虛擬dom 

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

和舊的虛擬dom 

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

進行比較 新的dom先比較key兩人相同，在比較內容一個是王五–14 一個是張三15 ,內容發生變化瞭，這時就會進行使用新的虛擬dom生成新的真是dom重新渲染頁面，而且不僅是之前的張三受影響需要重新生成，後面的李四也要被張三進行替換在生成一個新的內容為張三的真實dom，這樣就會導致所有的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/[email protected]/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}>點擊添加</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>

試想一下經過上面的推導致，如果我們使用id作為唯一的key值會怎麼樣呢

更新前 

<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的節點 ，沒有生成新的真實dom進行渲染，而張三和上面key=1的進行對比，發現上面有一個key=1的節點，然後再對比他們的內容是否相同，發現內容也相同，那麼就可以復用舊的真實dom，節約性能

到此這篇關於react為什麼不推薦使用index作為key的文章就介紹到這瞭,更多相關react index作為key內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：