반응에서 키의 사용법은 무엇입니까

반응에서 키는 구성 요소를 식별하는 데 사용됩니다. DOM의 특정 요소가 추가되거나 삭제될 때 어떤 요소가 변경되었는지 식별할 수 있습니다. 키가 동일한 경우 구성 요소가 변경되면 해당 구성 요소의 속성만 업데이트됩니다. 키가 다른 경우 이전 구성 요소가 삭제되고 다시 렌더링됩니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React에서 키의 용도는 무엇인가요

간단히 말하면, React는 키를 사용하여 구성 요소를 식별합니다. 이는 ID 카드가 사람을 식별하는 데 사용되는 것과 같습니다. 각 키는 구성 요소에 해당합니다. React는 동일한 키를 동일한 구성 요소로 간주하므로 동일한 키에 해당하는 후속 구성 요소는 생성되지 않습니다.

키는 DOM의 특정 요소가 추가되거나 삭제될 때 React가 어떤 요소가 변경되었는지 식별하는 데 도움이 될 수 있습니다. 따라서 배열의 각 요소에 특정 ID를 부여해야 합니다.

React의 diff 알고리즘은 키를 고유 ID로 처리한 다음 구성 요소의 값을 비교하여 업데이트가 필요한지 결정합니다. 따라서 키가 없으면 React는 구성 요소를 업데이트하는 방법을 알 수 없습니다.

키를 전달하지 않고도 사용할 수 있습니다. 왜냐하면 React가 하위 구성 요소에 키가 없음을 감지한 후 기본적으로 배열의 인덱스를 키로 사용하기 때문입니다.

React는 키를 기반으로 구성 요소를 삭제, 재생성 또는 업데이트할지 결정합니다. 원칙은 다음과 같습니다.

• 키는 동일하며 구성 요소가 변경되면 React는 구성 요소의 해당 속성만 업데이트합니다.

• 키가 다르면 구성 요소가 이전 구성 요소를 삭제하고 전체 구성 요소를 다시 렌더링합니다.

주요 사용 시나리오

프로젝트 개발에서 키 속성의 가장 일반적인 사용 시나리오는 배열에서 동적으로 생성된 하위 구성 요소입니다. 각 하위 구성 요소에 고유한 키 속성 값을 추가해야 합니다. 어떤 사람들은 자연스럽게 키에서 얻은 인덱스 위치의 값과 동적으로 렌더링된 하위 요소의 값이 매우 가깝다고 생각할 것입니다. 인덱스를 직접 사용하여 키 값을 첨부하는 것은 가능하지 않습니까? ?

예:

{dataList.map((item,index)=>{
    return <div style={mystyle} key={index}>{item.name}</div>
    })
}

해보시면 오류가 사라지고 렌더링에도 문제가 없다는 것을 알 수 있는데 정상 아닌가요? ! 그러나 배열 인덱스를 키로 사용하는 것은 강력히 권장되지 않습니다.

데이터 업데이트가 단순히 배열을 재정렬하거나 중간 위치에 새 요소를 삽입하는 것이라면 뷰 요소가 모두 다시 렌더링됩니다.

예:

인덱스가 2인 요소가 앞으로 이동하면 해당 요소의 키도 변경됩니다. 그러면 이렇게 변경되는 키는 "와 동일하므로 존재 의미가 없습니다. 신분증'이 존재한다면 분실될 여지가 없습니다. 물론 키 값을 사용하여 하위 구성 요소를 생성할 때 배열의 내용이 순수 표시만을 위한 것이고 배열의 동적 변경을 포함하지 않는 경우 실제로 인덱스를 키로 사용할 수 있습니다.

추천 학습: "react 비디오 튜토리얼"

위 내용은 반응에서 키의 사용법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!