Mengapa `setState()` Tidak Kemas Kini Keadaan Komponen React dengan Segera?

Pengurusan Negeri dalam React: Memahami Sifat Async setState()

Dalam React, kaedah setState() digunakan untuk mengemas kini keadaan komponen. Walau bagaimanapun, satu salah tanggapan yang biasa ialah setState() segera mengubah suai keadaan. Ini tidak berlaku.

Memahami Sifat Asynchronous setState()

Dokumentasi React dengan jelas menyatakan: "setState() tidak serta-merta mengubah keadaan ini tetapi mencipta peralihan keadaan belum selesai." Ini bermakna selepas memanggil setState(), mengakses this.state masih boleh mengembalikan nilai sedia ada. React membenarkan gelagat ini untuk pengoptimuman prestasi, kerana ia boleh mengumpulkan berbilang setState() panggilan untuk kecekapan.

Memerhati Gelagat Async

Pertimbangkan coretan kod berikut daripada bahagian Borang dalam dokumentasi React:

handleChange: function(event) {
    console.log(this.state.value);
    this.setState({value: event.target.value});
    console.log(this.state.value);
},

Jika anda mengemas kini nilai input dalam penyemak imbas, anda akan melihat bahawa kedua-dua console.log pernyataan mengeluarkan nilai yang sama. Tingkah laku ini menunjukkan sifat tak segerak setState(). Console.log pertama menunjukkan nilai keadaan awal, manakala yang kedua masih menunjukkan nilai yang sama, walaupun kami mengemas kininya menggunakan setState().

Melaksanakan Kod Selepas Perubahan Keadaan

Jika anda perlukan untuk menjalankan kod selepas perubahan keadaan berlaku, React menyediakan penyelesaian:

this.setState({value: event.target.value}, function() {
    console.log(this.state.value);
});

Dalam kes ini, panggilan balik yang dihantar ke setState() akan dilaksanakan selepas kemas kini keadaan selesai, pastikan console.log mencetak nilai keadaan yang dikemas kini.

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