반응 키의 용도는 무엇입니까?

반응에서 키의 역할은 diff 알고리즘에서 요소가 새로 생성되거나 이동되는지 확인하여 불필요한 diff를 줄이는 것, 즉 diff 피어 비교의 효율성을 높이고 현장 재사용을 방지하는 것입니다. ; 키는 목록의 요소가 수정, 추가 또는 삭제되었는지 추적하기 위해 반응에서 사용하는 식별자입니다.

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

react에서 key의 용도는 무엇인가요

Function

Vue와 마찬가지로 React에도 diff 알고리즘이 있는데, 요소 key 속성의 역할은 해당 요소가 새로 생성된 요소인지 이동된 요소인지 판별하는 것입니다. 불필요한 Diff 줄이기

react의 diff 알고리즘에서 React는 요소의 키를 사용하여 요소가 새로 생성되거나 이동되는지 확인하여 불필요한 요소 렌더링을 줄입니다. 또한 React는 키를 기반으로 요소와 로컬 상태 간의 관계를 판단해야 합니다. 간단히 말하면 diff의 피어 비교 효율성을 높이고 현장 재사용으로 인한 부작용을 피하는 것입니다.

vue와 React 자체는 diff 알고리즘을 사용합니다. Vue는 보다 세분화된 업데이트 구성 요소 방법을 채택합니다. 즉, 리스너를 각 속성에 바인딩합니다.

React는 각각의 작은 변경 사항에 대해 하향식 업데이트 전략을 채택합니다. diff를 위해 vdom이 생성됩니다. 키가 작성되지 않으면 업데이트되어야 하지만 키는 무엇입니까? 키는 목록의 어떤 요소가 수정되고 추가되었는지 추적하는 데 사용됩니다. 마크가 삭제되었습니다. 개발 과정에서 요소의 키가 형제 요소 간에 고유한지 확인해야 합니다.

목록 데이터가 렌더링되고 데이터 뒤에 데이터 조각이 삽입되면 다음과 같이 키가 큰 역할을 하지 않습니다.

this.state = {
    numbers:[111,222,333]
}
 
insertMovie() {
  const newMovies = [...this.state.numbers, 444];
  this.setState({
    movies: newMovies
  })
}
 
<ul>
    {
        this.state.movies.map((item, index) => {
            return <li>{item}</li>
        })
    }
</ul>

이전 요소는 diff 알고리즘에 포함됩니다. 마찬가지로 삭제 및 생성 작업은 발생하지 않습니다. , 마지막 비교 중에 새 DOM 트리에 삽입해야 합니다 따라서 이 경우 요소에 키 속성이 있는지 여부는 큰 의미가 없습니다

앞서 데이터를 삽입할 때 키를 사용하는 방법을 살펴보겠습니다. 키를 사용하지 않는 것의 차이점:

insertMovie() {
  const newMovies = [000 ,...this.state.numbers];
  this.setState({
    movies: newMovies
  })
}

키가 있는 경우 React는 원본 트리의 하위 요소와 최신 트리 기반의 하위 요소를 일치시킵니다. 위의 경우 키 속성에 000 요소만 앞쪽에 삽입하면 됩니다

키가 없으면 모든 li 태그를 수정해야 합니다

마찬가지로 키 값이 있다고 해서 성능이 높아지는 것은 아닙니다. .텍스트 내용만 변경된 경우 키를 작성하지 않으면 성능과 효율성이 높아집니다

주로 키를 작성하지 않으면 모든 텍스트 내용을 교체한다는 의미이므로 노드는 변경되지 않습니다

그리고 키를 작성하려면 추가 및 삭제가 포함됩니다. 이전 키가 더 이상 존재하지 않으면 삭제하세요. 그런 다음 삽입하면 성능 오버헤드가 증가합니다

요약

키 속성을 잘 사용하는 것은 성능 최적화에서 매우 중요한 단계입니다. 참고 사항:

키는 고유해야 합니다

키에 임의의 값(무작위 숫자)을 사용하지 마세요. 다음 렌더링 시 숫자가 재생성됩니다.)인덱스를 키로 사용하지 마세요

반응 프로세스 핵심 판단은 다음과 같습니다.

추천 학습: "

react 비디오 튜토리얼

"

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