React key 값 의 역할 과 사용 에 대한 상세 한 설명

react 프로젝트 에서 항상 이런 구 덩이 를 만 납 니 다.

이것 은 배열 이 하위 요 소 를 옮 겨 다 니 는 데 유일한 key 값 이 있어 야 한 다 는 것 을 경고 하 는 것 입 니 다.그러나 key 는 도대체 무엇 입 니까?코드 에서 도대체 어떤 역할 을 했 습 니까?
key 개요
react 의 key 속성 은 특수 한 속성 입 니 다.개발 자 에 게 사용 하 는 것 이 아 닙 니 다.(예 를 들 어 구성 요소 에 key 를 설정 한 후에 도 이 구성 요소 의 key 값 을 가 져 올 수 없습니다)react 자신 에 게 사용 하 는 것 입 니 다.
쉽게 말 하면 react 는 key 를 이용 하여 구성 요 소 를 식별 하 는데 이것 은 신분 표지 표지 이다.마치 우리 의 신분증 이 한 사람 을 식별 하 는 것 과 같다.각 key 는 하나의 구성 요소 에 대응 합 니 다.같은 key react 는 같은 구성 요소 라 고 생각 합 니 다.그러면 같은 key 대응 구성 요 소 는 만 들 지 않 습 니 다.
키 의 사용 장면
프로젝트 개발 에서 키 속성의 사용 장면 이 가장 많은 것 은 그룹 이 동적 으로 만 든 하위 구성 요소 의 경우 각 하위 구성 요소 에 유일한 키 속성 값 을 추가 해 야 합 니 다.키 와 동적 으로 보 여 주 는 하위 요소 가 가 져 온 index 위치의 값 이 비슷 하 다 는 것 을 자 연 스 럽 게 생각 하 는 사람 이 있 습 니 다.그것 은 index 로 키 의 값 을 직접 첨부 할 수 있 는 것 이 아 닙 니까?key={index}?
예 를 들 면:

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

당신 이 시도 한 후에 알 게 될 것 입 니 다.잘못 보고 하고 과장 하 는 것 도 문제 가 없 는 것 이 정상 적 이지 않 습 니까?!하지만 키 로 배열 index 를 추천 하지 않 습 니 다.
데이터 업데이트 가 배열 만 정렬 하거나 중간 위치 에 새 요 소 를 삽입 하면 보기 요 소 는 다시 렌 더 링 됩 니 다.
예 를 들 면:
원래 index=2 의 요소 가 앞으로 이동 한 후에 이 요소 의 key 도 똑 같이 바 뀌 었 다.그러면 바 뀔 수 있 는 Key 는 아무런 존재 의미 가 없다.'신분증'과 같은 존재 인 만큼 실수 할 수 없다.물론 키 값 으로 하위 구성 요 소 를 만 들 때 배열 의 내용 이 단순히 보 여 주 는 것 일 뿐 배열 의 동적 변경 과 관련 되 지 않 는 다 면 index 를 키 로 사용 할 수 있 습 니 다.
key 의 값 은 유일 하고 안정 적 이 어야 합 니 다.
키 값 과 몇 번 접촉 한 후에 키 값 은 데이터베이스 의 메 인 키 id 와 유사 하고 유일 하 다 고 생각 합 니 다.

//this.state.users  。  ：      id  ！！！
this.state = {
 users: [{id:1,name: '  '}, {id:2, name: '  '}, {id: 2, name: "  "}],
 ....//  
}
render()
 return(
 <div>
  <h3>    </h3>
  {this.state.users.map(u => <div key={u.id}>{u.id}:{u.name}</div>)}
 </div>
 )
);

상기 범례 에서 동적 렌 더 링 데이터 에서 key 는 데이터 의 id 로 정 하고 이사,왕 오 는 id 가 같 아서 Key 의 공통점 을 초래 합 니 다.마지막 렌 더 링 결 과 는 장삼 과 이사 이 고 왕 오 는 보 여주 지 않 았 습 니 다.주로 react 는 key 에 따라 이사 와 왕 오 가 같은 구성 요소(이사 와 왕 오 의 key 값 이 같다)라 고 생각 하기 때문에 첫 번 째 가 과장 되 고 그 다음 에 버 려 집 니 다.
이렇게 하면 키 속성 이 생기 면 구성 요소 와 대응 하 는 관 계 를 맺 을 수 있 습 니 다.react 는 키 에 따라 구성 요 소 를 다시 만 들 지 업데이트 할 지 결정 합 니 다.
그리고 키 도 값 의 안정성 을 확보 해 야 한다.예 를 들 어:

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

특히 상기 범례 에서 보 듯 이 key 의 값 은 Math.random()로 무 작위 로 생 성 되 어 배열 요소 의 모든 항목 을 다시 없 애고 다시 만 들 며 일정한 성능 비용 이 듭 니 다.또 예상 치 못 한 문제 가 생 길 수 있다.
따라서 키 의 값 은 유일 하고 안정성 을 확보 해 야 한다.
따라서 random 을 사용 하여 키 를 무 작위 로 생 성 할 수 없 을 때,우 리 는 아래 와 같이 전역 적 인 localCounter 변수 로 안정 적 이 고 유일한 키 값 을 추가 할 수 있 습 니 다.

var localCounter = 1;
this.data.forEach(el=>{
el.id = localCounter++;
});
//           ，
function createUser(user) {
return {
...user,
id: localCounter++
}
}

key 기타 주의사항
물론 데이터 요소 에 생 성 된 구성 요소 에 key 를 추가 하고 key 가 안정 적 이 고 유일 해 야 하 는 것 외 에 다음 과 같은 몇 가 지 를 주의해 야 합 니 다.
key 속성 은 하위 구성 요소 내부 의 맨 위 구성 요소 가 아 닌 사용자 정의 하위 구성 요소 에 추 가 됩 니 다.

//MyComponent
...
render() {//error
<div key={{item.key}}>{{item.name}}</div>
}
...

//right
<MyComponent key={{item.key}}/>

key 값 의 유일한 범 위 는 범위 가 있 습 니 다.즉,배열 에서 생 성 된 같은 등급 의 구성 요소 에서 유일 하 게 유지 해 야 합 니 다.모든 구성 요소 의 key 가 유일 하 게 유지 해 야 하 는 것 이 아 닙 니 다.
배열 생 성 구성 요소 뿐만 아니 라 다른 곳 에서 도 key 를 사용 할 수 있 습 니 다.주로 react 는 key 를 이용 하여 구성 요 소 를 구분 합 니 다.같은 key 는 같은 구성 요 소 를 표시 합 니 다.react 는 구성 요 소 를 만 드 는 인 스 턴 스 를 다시 없 애 지 않 고 업데이트 만 가능 합 니 다.key 와 달리 react 는 기 존 구성 요소 인 스 턴 스 를 없 애고 구성 요소 의 새로운 인 스 턴 스 를 다시 만 듭 니 다.

{
this.state.type ? 
<div><Son_1/><Son_2/></div>
: <div><Son_2/><Son_1/></div>
}

예 를 들 어 위의 코드 에서 this.state.type 의 값 이 바 뀌 었 을 때 원 Son1 과 Son 2 구성 요소 의 인 스 턴 스 가 모두 소각 되 고 Son 을 다시 만 듭 니 다.1 과 Son2.구성 요소 의 새로운 인 스 턴 스 는 원래 의 상 태 를 계승 할 수 없습니다.사실은 그들 은 위 치 를 바 꾸 었 을 뿐 입 니 다.이러한 문 제 를 피하 기 위해 서,우 리 는 구성 요소 에 키 를 추가 할 수 있다.

{
this.state.type ? 
<div><Son_1 key="1"/><Son_2 key="2"/></div>
: <div><Son_2 key="2" /><Son_1 key="1"/></div>
}

이렇게,this.state.type 의 값 이 바 뀌 었 을 때,Son1 과 Son 2 구성 요소 의 인 스 턴 스 는 다시 만 들 지 않 았 습 니 다.react 는 위 치 를 바 꿀 뿐 입 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.