왜 반응 키가 중요합니까: 인용

React에서 모든 종류의 목록을 처리할 때 key 아이템을 포함하는 것을 잊어버리면 이 경고가 자주 발생합니다.

Warning: Each child in a list should have a unique “key” prop

그렇다면, 왜 React는 키를 포함하는 것을 알려 줍니다. 왜 그것이 중요합니까?
안녕하십니까? 본고에서 저는 React 키의 기본 개념, 그것이 왜 중요한지, 그리고 그것을 어떻게 정확하게 사용하는지 설명하겠습니다.뛰어 들어가라고!

리액션 키가 뭐예요?

간단히 말하면 목록의 하위 요소에서 전달되는 도구입니다.

에 추가된 요소 확인

업데이트된 요소 확인

삭제된 요소 확인

따라서 열쇠는 하나의 요소의 표식으로 여권이 사람을 식별하는 것과 같다.

우리는 왜 그것을 필요로 합니까?

이 점에서, 너는 왜 우리가 그것을 필요로 하는지 알고 싶을지도 모른다.어쨌든 우리는 id, 클래스, 부/자, 색인, 도구 등을 통해 요소를 식별할 수 있다. 답은React의 Diffing Algorithm 때문이다.

차분 알고리즘: 간략한 설명

React 응용 프로그램은 구성 요소 트리로 구성됩니다.모든 구성 요소에 속성이나 상태 변경이 나타날 때마다 React는 구성 요소를 가상 DOM으로 다시 표시합니다.차분 알고리즘은 루트 노드에서 시작하여 구성 요소 트리의 각 단계에서 새로운 가상 DOM을 이전 DOM과 비교합니다.

이 알고리즘은 실제 DOM을 업데이트하는 데 필요한 최소 작업 수를 찾습니다.그것은 이렇게 한다.

1. 유형별로 노드(즉 <div>와 <span>)를 비교한다.

다른 경우 0부터 새 어셈블리를 제거하고 구성합니다.

// virtual DOM
<div><MyComponent/></div>

// real DOM
<span><MyComponent/></span>

E, g. 이로 인해 <MyComponent/>이 파괴되고 재건되었다.

2. 노드 유형이 같으면 속성별로 비교합니다.

다른 경우 속성만 업데이트됩니다.

// virtual DOM
<div className="after" title="stuff" />

// real DOM
<div className="before" title="stuff" />

E, g. 이로 인해 className이 after으로 업데이트되었습니다.

리스트는요?

목록에 대해 React는 두 개의 하위 객체에 동시에 귀속되며 차이점을 찾아 실제 DOM으로 패치합니다(있는 경우).

// virtual DOM
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

// real DOM
<ul>
  <li>first</li>
  <li>second</li>
</ul>

E, g. 이로 인해 <li>third</li> 이후에 <li>second</li>이 추가됩니다.
지금까지 괜찮았어?그러나 이제 목록의 밑에 원소를 추가하는 것보다 처음에 새로운 원소를 추가하는 것이 낫지 않을까요?

// virtual DOM
<ul>
  <li>zero</li>
  <li>first</li>
  <li>second</li>
</ul>

// real DOM
<ul>
  <li>first</li>
  <li>second</li>
</ul>

이 예시는React가 각 <li>을 실제 DOM으로 다시 렌더링합니다. 왜냐하면 간단하게 <li>zero</li>을 목록의 시작에 추가할 수 있다는 것을 의식하지 못했기 때문입니다.
이런 효율 저하는 특히 대형 응용 프로그램에서 문제를 초래할 수 있다.따라서 키는 이 문제에 간단한 해결 방안을 제공했다.

키를 올바르게 사용하는 방법: id

다음과 같이 목록 요소에 쉽게 키를 추가할 수 있습니다.

<li key="1">first</li>
<li key="2">second</li>
<li key="3">third</li>

키는 모든 요소를 정확하게 식별할 수 있도록 유일한 식별자여야 한다.따라서 유일하게 생성된 id을 키로 사용하는 것을 권장합니다.동적 렌더링 목록에 키를 할당할 수도 있습니다.

const todoItems = todos.map((todo) =>
  <li key={todo.id}>
    {todo.text}
  </li>
);

키를 사용하는 잘못된 방법: 인덱스

목록을 변경할 때 색인을 키로 사용하면 문제가 발생합니다.다음은 내가 이 문제를 설명하는 데모다.

학생 목록에 새 요소를 추가할 때 Notes 속성이 올바르게 비치지 않습니다. 목록의 인덱스가 키이기 때문입니다.
따라서 속성의 값(greenroots 및 mycodinghabits)은 항상 색인 0과 1에 위치합니다. 대응하는 목록 요소가 목록에 있는 위치를 변경했더라도.
우리가 Student ID을 키로 사용하면 어떤 모습일지 봅시다.

다음은 병렬 비교입니다.

Feel free to visit the demo or see the repo.

결론

키의 주된 목적은 요소를 구분하고 구분하여 가상과 실제 DOM을 구분할 때 성능을 향상시키는 것이다.키포인트를 사용하려면 요소(예: <li>)에 아이템을 추가하면 됩니다.
고유 ID는 키에 할당된 최적 값입니다.목록이 정적 (변경할 수 없음) 이고 요소가 id 속성이 없으면 색인을 키로만 사용할 수 있습니다.
읽어주셔서 감사합니다.나는 이 문장이 유용하길 바란다.만약 문제가 있다면, 아래의 어떤 평론도 좋아하거나 공유하세요.좀 더 읽으려면 아래의 부분을 보십시오.즐거운 하루 되세요, 건배!

공구서류

React Diffing Algorithm

React Lists and Keys

Demo Repo

Visit Demo

사진: Zairza.in