Mengapa `setState` Tidak Kemas Kini Keadaan Komponen React Serta-merta?

Mengapa Memanggil Kaedah setState Tidak Mengubah Keadaan Serta-merta?

Dalam React, kaedah setState ialah fungsi tak segerak yang digunakan untuk menetapkan keadaan komponen. Ini bermakna keadaan tidak dikemas kini serta-merta selepas memanggil setState. Ini kerana setState mencetuskan pemaparan semula komponen, yang boleh menjadi operasi yang mahal. Untuk mengelak daripada membuat penyemak imbas tidak bertindak balas, panggilan setState dikumpulkan dan dilaksanakan kemudian.

Sifat Asynchronous setState

Menurut dokumentasi React: "setState() tidak segera mengubah keadaan ini, tetapi mewujudkan peralihan keadaan yang belum selesai." Oleh itu, mengakses this.state selepas memanggil setState masih boleh mengembalikan nilai sedia ada.

Panggilan setState Berkelompok

Untuk pengoptimuman prestasi, berbilang panggilan setState mungkin digabungkan bersama dan dilaksanakan dalam satu pemaparan semula . Ini menghalang pemaparan semula yang tidak perlu dan meningkatkan responsif UI.

Menggunakan Panggilan Balik

Untuk mengakses nilai keadaan yang dikemas kini selepas setState, anda boleh menggunakan fungsi panggil balik sebagai argumen kedua. Panggilan balik ini akan dilaksanakan selepas keadaan dikemas kini:

setState({ key: value }, () => {
    console.log('updated state value', this.state.key)
});

Contoh

Pertimbangkan contoh berikut:

class NightlifeTypes extends React.Component {
   handleOnChange = (event) => {
      let value = event.target.checked;

      if(event.target.className == "barClubLounge") {
         this.setState({ barClubLounge: value}, () => { 
             console.log(value);
             console.log(this.state.barClubLounge);
             //both will print same value
         });        
      }
   }
}

Dalam contoh ini, fungsi handleOnChange ditetapkan sifat keadaan barClubLounge kepada argumen nilai. Fungsi panggil balik dalam panggilan setState memastikan bahawa log konsol akan memaparkan nilai keadaan yang dikemas kini.

Atas ialah kandungan terperinci Mengapa `setState` Tidak Kemas Kini Keadaan Komponen React Serta-merta?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!