react 는 왜 index 를 key 로 추천 하지 않 습 니까?

4699 단어 react.indexkey
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>
위의 업 데 이 트 를 통 해 왕 오 가 앞의 장 삼 의 키 를 점용 한 것 을 발견 할 수 있 습 니 다.
그 러 니까 내 가 이 과정 을 업데이트 할 때 먼저 새로운 가상 dom.

<li key="0">  --14</li>
낡은 가상 dom

<li key="0">  --15</li>
새로운 dom 을 비교 할 때 먼저 key 두 사람 이 똑 같 습 니 다.비교 내용 중 하 나 는 왕 오 C14 이 고 하 나 는 장 삼 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 내용 으로 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
Vue 어떻게 우아 하 게 타이머 제거
Vue 구성 요소 회전 목마 애니메이션 구현

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage