快捷導(dǎo)航

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

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

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

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

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

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

他會是這樣一個過程，源數(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>

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

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

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

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

和舊的虛擬dom

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

進(jìn)行比較新的dom先比較key兩人相同，在比較內(nèi)容一個是王五–14 一個是張三15 ,內(nèi)容發(fā)生變化了，這時就會進(jìn)行使用新的虛擬dom生成新的真是dom重新渲染頁面，而且不僅是之前的張三受影響需要重新生成，后面的李四也要被張三進(jìn)行替換在生成一個新的內(nèi)容為張三的真實(shí)dom，這樣就會導(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)過上面的推導(dǎo)致，如果我們使用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的節(jié)點(diǎn) ，沒有生成新的真實(shí)dom進(jìn)行渲染，而張三和上面key=1的進(jìn)行對比，發(fā)現(xiàn)上面有一個key=1的節(jié)點(diǎn)，然后再對比他們的內(nèi)容是否相同，發(fā)現(xiàn)內(nèi)容也相同，那么就可以復(fù)用舊的真實(shí)dom，節(jié)約性能

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

您可能感興趣的文章: