React의 주요 소품은 요소 목록을 렌더링 할 때 사용되는 특수 속성입니다. 주요 목적은 목록에 어떤 항목이 변경되었는지, 추가 또는 제거되었는지 식별하는 데 도움이되는 것입니다. REACT에서 다양한 요소를 렌더링하면 React는 사용자 인터페이스를 효율적으로 업데이트하기 위해 개별 요소를 추적하는 방법이 필요합니다.
키는 목록 요소에 대한 안정적인 식별자 역할을합니다. 그들은 형제들 사이에서 독특해야하지만 전 세계적으로 독특 할 필요는 없습니다. React는 이러한 키를 사용하여 새로 업데이트 된 목록을 이미 DOM에있는 목록과 조정합니다. 이 프로세스는 조정이라고하며 키를 사용하면 더 효율적입니다.
예를 들어, 다음과 같은 목록이있을 때 다음과 같습니다.
<code class="jsx"><ul> {items.map((item) => ( <li key="{item.id}">{item.text}</li> ))} </ul></code> key={item.id} <li> 요소가 items 배열의 어떤 항목에 해당 하는지를 반응하여 목록이 변경 될 때 업데이트를 최적화 할 수 있도록 도와줍니다.
주요 소품의 오용은 React 응용 프로그램의 성능에 몇 가지 부정적인 영향을 줄 수 있습니다.
이러한 문제를 피하려면 키가 안정적이고 독특하며 목록 내에서 적절하게 사용되도록하는 것이 중요합니다.
응답 목록에 효과적으로 키 소품을 할당하는 것은 응용 프로그램의 성능과 정확성을 유지하는 데 중요합니다. 모범 사례는 다음과 같습니다.
id 일 수 있습니다. 예를 들어, 사용자 목록을 렌더링하는 경우 사용자 ID를 키로 사용하십시오 : key={user.id} .
<li> 키로 배열 인덱스를 사용하지 마십시오 . 인덱스를 사용하면 ( key={index} ) 인덱스가 안정적인 식별자가 아니기 때문에 목록 순서가 변경되면 문제가 발생할 수 있습니다. 그러나 목록이 정적이고 재정렬 또는 필터링되지 않으면 인덱스가 허용 될 수 있습니다.
<li> 임의의 숫자 또는 타임 스탬프를 사용하지 마십시오 . 이는 안정적인 식별자가 아니며 성능 문제와 상태 손실로 이어질 수 있습니다.
<li> 전체 항목을 키로 사용하여 최후의 수단으로 사용하십시오 . 항목에 고유 식별자가없는 경우 전체 항목을 키로 사용할 수 있으며 문자열로 직렬화 될 수 있습니다. key={JSON.stringify(item)} . 그러나 이것은 큰 객체의 긴 키와 성능 문제로 이어질 수 있기 때문에 신중하게 사용해야합니다.
<li> 키가 렌즈에 걸쳐 일관되게 보장하십시오. 키는 조정 구성 요소에 효율적으로 반응하는 데 도움이되는 다른 렌더링의 주어진 데이터에 대해 키가 동일해야합니다.
예, String Literals를 주요 소품으로 사용하면 React에서 몇 가지 문제가 발생할 수 있습니다.
key="item" 과 같은 키가 동일한 키가있는 항목 목록이있는 경우 React는 목록의 변경 사항을 효율적으로 조정하여 차선책을 초래할 수 없습니다.
<li> 잘못된 업데이트 : 목록이 업데이트되면 (항목이 추가, 제거 또는 재주문) 키가 고유하지 않은 경우 RECT가 DOM을 잘못 업데이트 할 수 있습니다. 이로 인해 요소가 잘못된 순서로 나타나거나 잘못 제거되거나 추가 될 수 있습니다.
<li> 가상 DOM의 혼란 : 비 유적 키를 사용하면 React의 가상 DOM 조정 알고리즘을 혼동하여 렌더링 된 UI에서 예상치 못한 결과를 초래할 수 있습니다.
이러한 문제를 피하기 위해 키에 고유하고 안정적인 식별자를 사용하는 것이 가장 좋습니다.
위 내용은 목록을 렌더링 할 때 키 소품의 목적은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
