React에서 키값의 역할은 무엇이며, 키값의 용도는 무엇인가요? (코드 포함)

이 글에서 제공하는 내용은 React에서 핵심 값의 역할과 핵심 값의 사용법에 관한 것입니다. (코드 첨부) 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

리액트 프로젝트에서 항상 이런 구덩이를 만나게 될 것입니다

이것은 하위 요소의 배열 순회가 고유한 키 값을 가져야 한다는 경고입니다. 그러나 키가 정확히 무엇이며 키가 키에서 수행하는 작업은 무엇입니까? 코드? 효과?

키 개요

반응의 키 속성은 특별한 속성이며 그 모양은 개발자를 위한 것이 아닙니다(예를 들어 구성 요소에 대한 키를 설정한 후에도 여전히 구성 요소의 키 값을 얻을 수 없습니다). 반응 자체를위한 것입니다.
간단히 말하면, 우리의 신분증이 사람을 식별하는 데 사용되는 것처럼 React는 키를 사용하여 신원 식별자인 구성 요소를 식별합니다. 각 키는 구성 요소에 해당합니다. React는 동일한 키를 동일한 구성 요소로 간주하므로 동일한 키에 해당하는 후속 구성 요소는 생성되지 않습니다.

키 사용 시나리오

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

例如：
{dataList.map((item,index)=>{
        return <p>{item.name}</p>
        })
}

시도해보시면 나중에 오류도 사라지고 렌더링에는 문제가 없다는 걸 확인하실 수 있는데 정상 아닌가요? ! 그러나 배열 인덱스를 키로 사용하는 것은 강력히 권장되지 않습니다.
데이터 업데이트가 단순히 배열을 재정렬하거나 중간 위치에 새 요소를 삽입하는 것이라면 뷰 요소가 모두 다시 렌더링됩니다.

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

키의 값은 고유하고 안정적이어야 합니다

키 값을 여러 번 처리한 결과 키 값이 데이터베이스의 기본 키 ID와 유사하고 고유하고 고유하다는 것을 느꼈습니다.

//this.state.users内容。注意：李四和王五的id相同！！！
this.state = {
 users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  <p>
    </p><h3>用户列表</h3>
    {this.state.users.map(u => <p>{u.id}:{u.name}</p>)}
  
 )
);

위의 예에서 동적으로 렌더링된 데이터에서는 데이터의 ID에 따라 키가 결정되며, Li Si와 Wang Wu의 ID가 동일하므로 최종 렌더링이 동일합니다. 결과는 Zhang San, Li Si 및 Wang Wu입니다. 주된 이유는 React가 키를 기준으로 John IV와 Wang Wu가 동일한 컴포넌트(John IV와 Wang Wu의 키 값이 동일함)라고 믿고 첫 번째 것을 렌더링하게 하고, 후속 항목은 삭제됩니다.

이러한 방식으로 키 속성을 사용하면 해당 구성 요소와 해당 관계가 설정될 수 있습니다. React는 키를 기반으로 구성 요소를 파괴, 재생성 또는 업데이트할지 여부를 결정합니다

그리고 키는 또한 안정성을 보장해야 합니다. 예:

{dataList.map((item,index)=>{
        return <p>{item.name}</p>
        })
}

특히 위의 예에 표시된 것처럼 키 값은 Math.random()에 의해 무작위로 생성되며 이로 인해 배열 요소의 각 항목이 삭제된 다음 다시 생성됩니다. , 이는 또한 특정 성능 오버헤드를 가지며 예상치 못한 문제가 발생할 수 있습니다.

그러므로 Key의 값은 고유성과 안정성을 보장해야 합니다

관련 권장 사항:

redis에서 키 값의 결과를 읽는 방법

React 네이티브 React-navigation 탐색 사용에 대한 자세한 설명

위 내용은 React에서 키값의 역할은 무엇이며, 키값의 용도는 무엇인가요? (코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!