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

반응에서 지도 사용: 1. "{this.state.ToDoList.map((item,index)=>{return

{item}

}을 사용합니다. )}" 구문 루프를 사용하여 배열 ToDoList를 표시합니다. 2. 배열을 사용하여 "map()" 메서드를 호출하고 원하는 콘텐츠를 반환합니다.

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

리액트에서 지도의 사용법은 무엇인가요?

React의 map() 메소드 사용 및 키 값 바인딩.

1. 다음은 루프에 배열 ToDoList를 표시하는 예입니다.

import React, { Component } from 'react'
export default class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       ToDoList:[1,2]
    }
  }
  
  render() {
    return (
      <div>
        <input></input><button>提交</button>
        <ul>
          {this.state.ToDoList.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>
      </div>
    )
  }
}

2. 배열로 map() 메서드를 직접 호출하고, 원하는 내용을 반환하고, 키 값을 바인딩합니다.

        <ul>
          {this.state.ToDoList.map((item,index)=>{
            return <li key={index}>{item}</li>
          })}
        </ul>

2.1 편의상 여기서 바인딩된 키 값은 배열의 첨자입니다. 이는 실제 사용에서는 권장되지 않습니다. 왜냐하면 React의 Diff 알고리즘이 구성 요소 비교를 수행할 때 호출된 키가 배열의 첨자일 경우 배열이 변경되면

[1,2,3]과 같이 첨자에 해당하는 배열 내용이 잘못됩니다. 1을 삭제하면

원래 첨자 0이 해당됩니다. 아래 첨자 1은 2에 해당합니다. 아래 첨자 2는 3에 해당합니다. 변경 후 아래 첨자 0은 2에 해당하고 아래 첨자 1은 3에 해당합니다. 분명히 이것은 Diff 알고리즘이 두 개의 가상 DOM을 비교할 때 문제를 일으킬 것입니다. id가 같으면 내용이 달라집니다. 아니요, id의 의미가 사라집니다. 따라서 배열 첨자를 키 값으로 사용하는 것은 권장되지 않습니다. 제가 이해한 내용을 바탕으로 쓴 글이니 오해가 있을 수 있으니, 틀린 부분이 있으면 정정해 주시기 바랍니다.

3. 실행 결과는 아래와 같습니다

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

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