React 에서 key 의 역할 을 자세히 설명 합 니 다.

React 에서 key 의 역할 을 이해 하려 면 key 의 수치 에 착안 할 수 있 습 니 다.key 의 수 치 는 세 가지 로 나 눌 수 있 습 니 다.부정 값,색인 값,확정 및 유일한 값 입 니 다.
다음 코드 에서 key 의 수치 가 부정 확 합 니 다(Math.random()
질문:버튼 을 눌 렀 을 때 span 의 색 이 빨간색 으로 변 합 니까?

import React, { useState } from 'react';

function App() {
  const [initMap, setInitMap] = useState([1,2,3,4]);
  const handleClick = () => {
    setInitMap([1,2,3,4])
    var spanEle = document.getElementsByTagName('span');
    Array.from(spanEle).map(it => it.style.color = 'red')
  }
  
  return (
    <div className="App" id="app">
      {
        initMap.map((it,index) => <div key={Math.random()}><span>color</span></div>)
      }
      <button onClick={() => handleClick()}></button>
    </div>
  );
}

export default App;

못 하 다
이 문 제 는 react 렌 더 링 메커니즘 과 diff 알고리즘 과 관련된다.
홈 페이지 에서 diff 에 대해 다음 과 같은 규칙 이 있 습 니 다.

요소 유형 이 변화 할 때 재건 축 을 소각 합 니 다

4.567917.원소 유형 이 변 하지 않 을 때 대비 속성

구성 요소 요소 의 유형 이 변 하지 않 을 때 props 재 귀 를 통 해 서브 노드 를 판단 합 니 다

4.567917.재 귀 대비 서브 노드,서브 노드 가 목록 일 때 key 와 props 를 통 해 판단 한다.키 가 일치 하면 업 데 이 트 를 하고 키 가 일치 하지 않 으 면 재 구축 을 소각 합 니 다.
상기 문 제 를 분석 하 다.
단 추 를 눌 렀 을 때 setInitMap([1,2,3,4])은 렌 더 링 을 일 으 키 고 렌 더 링 을 할 때 새로운 가상 dom 을 생 성 합 니 다.그러나 이때 얻 은 span 요 소 는 이전 요소(setInitMap 은 비동기 로 실행 되 기 때 문)이기 때문에 신 구 dom 은 대 비 를 합 니 다.
initMap.map(it,index)=>)이 코드 에서
여기 div 는 목록 입 니 다.네 번 째 diff 규칙 에 비해 react 는 key 에 따라 실제 dom 을 업데이트 할 지 여 부 를 판단 합 니 다.key={Math.random()},신 구 dom 의 값 이 일치 하지 않 으 면 div 가 다시 생 성 됩 니 다.그리고 저 희 는 업데이트 전의 요소 에 빨간색 스타일 을 추 가 했 기 때문에 다시 만 든 요소 에 이런 스타일 이 없 을 것 입 니 다.효 과 는 다음 과 같 습 니 다.

두 번 째 상황:key 의 값 은 색인 값 입 니 다.
위 에서 우리 가 분석 한 결 과 는 key 의 변화 로 인해 div 요소 가 render 에서 다시 생 성 된다 는 것 이다.그럼 키 가 render 전후 에 변 하지 않 는 다 면?예 를 들 어 key 를 index 로 변경 합 니 다.
문제:이 코드 는 button 을 클릭 하면 span 의 색상 이 변 합 니까?

return (
    <div className="App" id="app">
      <Spin spinning={spin}></Spin>
      {
        initMap.map((it,index) => <div key={index}><span>color</span></div>)
      }
      <button onClick={() => handleClick()}></button>
    </div>
  );

정 답:회
분석:render 전후 에 index 가 변 하지 않 기 때문에 div 는 다시 생 성 되 지 않 습 니 다.이 어 span 요 소 를 비교 합 니 다.span 요 소 는 render 전후 에 속성 변화 가 있 기 때문에 react 는 span 요소 에 새로운 속성 만 적용 할 수 있 습 니 다.그러나 그들 이 가리 키 는 것 은 예전 의 요소 입 니 다.

세 번 째 상황:key 의 수치 가 확실 하고 유일 합 니 다.
이 예 에서 key 를 index 로 설정 함으로써 span 의 색상 이 변 했 지만 key 를 사용 할 때 React 홈 페이지 에 서 는 index 를 추천 하지 않 습 니 다.

위의 코드 를 개조 해 주세요.

  const [initMap, setInitMap] = useState([1,2,3,4]);
  const handleClick = () => {
    setInitMap([3,2,1,4])
  }
  return (
    <div className="App" id="app">
      {
        initMap.map((it,index) => <div key={index}><input type="radio" />{it}</div>)
      }
      <button onClick={() => handleClick()}>  </button>
    </div>
  );
}

초기 화 할 때 3 인 단 추 를 선택 하 십시오

버튼 을 클릭 하 다

우리 가 예상 한 효 과 는,선택 한 것 은 여전히 값 이 3 인 단추 이지 만,이 때 는 값 이 1 인 단추 가 되 었 다 는 것 이다.
분석:
setState 이후 render

div 의 index 는 변 하지 않 기 때문에 div 는 다시 생 성 되 지 않 습 니 다.input 는 state 와 props 의 통 제 를 받 지 않 기 때문에 요소 의 상 태 는 변 하지 않 습 니 다

4.567917.그래서 변화 하 는 것 은 state 의 영향 을 받 는 it 밖 에 없다.
원 하 는 효 과 를 얻 으 려 면 유일 하고 확실한 key 를 설정 해 야 합 니 다.
테스트 1:

{
   initMap.map((it) => <div key={it}><input type="radio" />{it}</div>)
}

초기 화 할 때 세 번 째 단추 선택

버튼 을 클릭 하 다

이것 이 야 말로 기대 에 부합 되 는 효과 이다.
키 를 Math.random()으로 설정 하면 어떤 효과 가 있 을 지 생각해 보 세 요.버튼 의 상 태 는 유 지 됩 니까?
클릭 전:

클릭 후:

라디오 상 태 는 유지 되 지 않 습 니 다.
위의 예 를 통 해 우 리 는 React 에서 key 의 역할 을 대충 이해 할 수 있 습 니 다.아래 의 내용 은 React 지식 점 에 대한 확장 입 니 다.
확장 내용:글 의 시작 코드 는 React 두 가지 다른 지식 점 과 관련된다.하 나 는 언급 한 React 렌 더 링 조건 이 고 하 나 는 진실 dom 에 대한 조작 이다.
확장 1:리 액 트 렌 더 링 조건

import './App.css';
import React, { useState } from 'react';

function App() {
  const [initMap, setInitMap] = useState([1,2,3,4]);
  const [spin, setSpin] = useState(false);
  const handleClick = () => {
    setSpin(true); //    
    var spanEle = document.getElementsByTagName('span');
    Array.from(spanEle).map(it => it.style.color = 'red')
    setSpin(false); //    
  }
  
  return (
    <div className="App" id="app">
      <Spin spinning={spin}></Spin>
      {
        initMap.map((it,index) => <div key={Math.random()}><span>{it}</span></div>)
      }
      <button onClick={() => handleClick()}></button>
    </div>
  );
}

export default App;

테스트 결 과 는 다음 클릭 전:

클릭 후:

이 코드 에서 div 의 key 는 Math.random()을 사용 합 니 다.그러나 initMap 의 state 는 변 하지 않 았 기 때문에 다시 렌 더 링 하지 않 았 습 니 다.이때 div 는 재 구축 을 소각 하지 않 습 니 다.
확장 2:실제 dom 에 대해 조작 할 수 있 습 니까?
React 에서 가상 dom 의 등장 은 실제 dom 에 대한 조작 을 줄 이기 위 한 것 이다.진실 한 dom 요 소 는 비교적 복잡 한 대상 이기 때문에 조작 하면 계 산 량 이 비교적 크다.우리 위의 코드 에 서 는 dom 노드 를 직접 조작 하고 스타일 을 바 꾸 는 것 이 바람 직 하지 않 습 니 다.React 는 state 와 props 의 변화 에 따라 페이지 를 렌 더 링 하기 때문에 state 를 통 해 페이지 렌 더 링 을 제어 하 는 것 이 좋 습 니 다.
수 정 된 코드 는 다음 과 같 습 니 다.

function App() {
  const [initMap, setInitMap] = useState([1,2,3,4]);
  const [spin, setSpin] = useState(false);
  const [showColor, setShowColor] = useState(false);
  const handleClick = () => {
    setInitMap([3,2,1,4]);
    setShowColor(true);
  }
  
  return (
    <div className="App" id="app">
      <Spin spinning={spin}>
      {
        initMap.map((it,index) => <div key={Math.random()}><span className={showColor && 'span-color'}>color</span></div>)
      }
      </Spin>
      <button onClick={() => handleClick()}>  </button>
    </div>
  );
}

이 때 span 은 제 어 된 구성 요소 로 쇼 Color 의 상태 제어 요 소 를 통 해 렌 더 링 할 수 있 습 니 다.
클릭 전:

클릭 후:

state 제어 렌 더 링 을 사용 하면 코드 양 이 줄 어 들 고 결과 가 예상 에 부합 합 니 다.
총결산

key 를 사용 할 때 key 의 유일 성과 확정 성 을 확보 해 야 합 니 다.key 의 값 이 Math.random()이면 구성 요 소 를 재 구축 하여 이전 요소 에 대한 작업 을 무효 화 할 수 있 습 니 다

렌 더 링 페이지 에서 진실 한 dom 을 조작 하지 말고 state 를 사용 하여 페이지 를 업데이트 합 니 다

이상 은 React 에서 key 의 역할 에 대한 상세 한 내용 입 니 다.React key 의 역할 에 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!