Mengapa `setState` React Tidak Mengemas kini Keadaan Serta-merta?

setState Asynchrony: Mengapa Ia Tidak Mengemas Kini Keadaan Serta-merta?

Dalam aplikasi React, kaedah setState mencetuskan kemas kini keadaan tak segerak, mengetuai kepada kekeliruan jika keadaan dikemas kini dijangka serta-merta. Memahami tingkah laku ini adalah penting untuk pengurusan keadaan yang berkesan.

Sebab Asynchrony:

setState adalah tak segerak kerana ia memulakan proses pemaparan semula yang boleh intensif sumber. Untuk memastikan pengalaman pengguna yang lancar, React menggabungkan kemas kini ini untuk mengoptimumkan prestasi. Tingkah laku kelompok ini menghalang UI daripada menjadi tidak bertindak balas semasa kemas kini keadaan yang berat.

Akibat:

Apabila memanggil setState, keadaan tidak dikemas kini serta-merta. Mengakses this.state selepas panggilan setState boleh mengembalikan nilai keadaan sebelumnya sehingga kemas kini selesai. Tingkah laku ini boleh menyebabkan hasil yang tidak dijangka dalam kod yang bergantung pada keadaan dikemas kini serta-merta.

Menggunakan Kaedah Panggilan Balik:

Untuk mengakses keadaan dikemas kini selepas panggilan setState, React mengesyorkan menggunakan fungsi panggil balik sebagai hujah kedua. Panggilan balik ini akan dilaksanakan hanya selepas kemas kini keadaan diproses sepenuhnya, memastikan akses kepada nilai keadaan terkini.

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

Contoh:

Pertimbangkan kod berikut:

class NightlifeTypes extends React.Component {
  handleOnChange = (event) => {  // Arrow function binds `this`
    const value = event.target.checked;

    if (event.target.className === "barClubLounge") {
      this.setState({ barClubLounge: value });
      // Console log will still print the old state value here

      // Use a callback to log the updated state value
      this.setState({ barClubLounge: value }, () => {
        console.log(value);
        console.log(this.state.barClubLounge);
      });
    }
  };
  render() {
    return (
      <input
        className="barClubLounge"
        type="checkbox"
        onChange={this.handleOnChange}
        checked={this.state.barClubLounge}
      />
    );
  }
}

ReactDOM.render(<NightlifeTypes />, document.getElementById("app"));

Dalam contoh ini, log konsol dalam kaedah handleOnChange akan menunjukkan perbezaan antara mengakses keadaan serta-merta selepas setState dan menggunakan panggilan balik. Panggilan balik memastikan konsol mencetak nilai keadaan yang dikemas kini dengan betul.

Memahami sifat tak segerak setState adalah penting untuk mengurus keadaan dalam aplikasi React dengan berkesan. Dengan memanfaatkan kaedah panggil balik, anda boleh mengelakkan tingkah laku yang tidak dijangka dan memastikan akses yang betul kepada nilai keadaan terkini.

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