Apakah kegunaan peta dalam tindak balas

Penggunaan peta dalam tindak balas: 1. Gunakan "{this.state.ToDoList.map((item,index)=>{return

{item}})}" gelung sintaks untuk memaparkan tatasusunan ToDoList; 2. Gunakan tatasusunan untuk memanggil kaedah "map()" dan mengembalikan kandungan yang diingini.

Persekitaran pengendalian tutorial ini: sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Apakah penggunaan peta dalam tindak balas?

Penggunaan kaedah map() dalam React dan pengikatan nilai utama.

1 Berikut ialah contoh memaparkan tatasusunan ToDoList dalam gelung.

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 Panggil kaedah map() terus dengan tatasusunan, kembalikan kandungan yang anda inginkan dan ikat nilai kunci.

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

2.1 Untuk kemudahan, nilai kunci terikat di sini ialah subskrip tatasusunan Ini tidak disyorkan dalam penggunaan sebenar, kerana apabila algoritma Diff dalam React melakukan perbandingan komponen, kunci yang dipanggil ialah tatasusunan. subskrip. Jika ya, perubahan pada tatasusunan akan menyebabkan kandungan tatasusunan yang sepadan dengan subskrip menjadi tidak betul, seperti

[1,2,3], yang akan menjadi [2,3],

selepas memadam 1 Pada asalnya, subskrip 0 sepadan dengan 1, subskrip 1 sepadan dengan 2, dan subskrip 2 sepadan dengan 3. Selepas perubahan, subskrip 0 sepadan dengan 2, dan subskrip 1 sepadan dengan 3. Jelas sekali ini akan menyebabkan masalah apabila algoritma Diff membandingkan dua DOM maya Bermasalah, kerana kandungan yang sepadan adalah berbeza apabila id adalah sama, dan makna id hilang. Oleh itu, tidak disyorkan untuk menggunakan subskrip tatasusunan sebagai nilai utama. Ini ditulis atas kefahaman saya sendiri Mungkin ada salah faham, ini maksud umum.

3. Hasil larian adalah seperti yang ditunjukkan di bawah

Pembelajaran yang disyorkan: "tutorial video bertindak balas"

Atas ialah kandungan terperinci Apakah kegunaan peta dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!