Bilakah keadaan set reaksi disegerakkan?

Keadaan set React adalah "segerak" dalam acara asli dan setTimeout, tetapi "tak segerak" dalam acara sintetik dan fungsi cangkuk; dalam React, jika ia adalah peristiwa yang dicetuskan oleh React, panggilan setState tidak akan mengemas kini "this.state " serentak, dan panggilan setState lain akan melaksanakan "this.state" serentak.

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

Bilakah keadaan set tindak balas akan disegerakkan? Bilakah ia tidak segerak?

Mula-mula berikan jawapan:

Kadangkala ia kelihatan tidak segerak, kadangkala ia kelihatan segerak.

setState adalah "tak segerak" hanya dalam acara sintetik dan fungsi cangkuk, dan segerak dalam acara asli dan setTimeout.

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log
    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }
  render() {
    return null;
  }
};

1.setState adalah "tak segerak" hanya dalam acara sintetik dan fungsi cangkuk, dan segerak dalam acara asli dan setTimeout.

2. "tak segerak" setState tidak bermakna ia dilaksanakan secara dalaman oleh kod tak segerak Sebenarnya, proses pelaksanaan dan kod semuanya segerak, tetapi urutan panggilan acara sintetik dan fungsi cangkuk adalah sebelum. mengemas kini,

Akibatnya, nilai yang dikemas kini tidak boleh diperolehi serta-merta dalam acara sintetik dan fungsi cangkuk, membentuk apa yang dipanggil "tak segerak". parameter kedua setState(partialState, callback) keputusan.

3. Pengoptimuman kemas kini kumpulan setState juga berdasarkan "asynchronous" (peristiwa sintetik, fungsi cangkuk tidak akan ada dalam acara asli dan setTimeout " "Jika setState dilakukan berbilang kali pada nilai yang sama, strategi kemas kini kelompok setState akan menimpanya dan mengambil pelaksanaan terakhir Jika beberapa nilai berbeza ditetapkan pada masa yang sama, ia akan digabungkan dan dikemas kini dalam kelompok semasa kemas kini.

Dalam React, jika pemprosesan acara dicetuskan oleh React (seperti pemprosesan acara yang dicetuskan oleh onClick), panggilan setState tidak akan mengemas kini.keadaan ini secara serentak. Apa yang dipanggil "selain itu" merujuk kepada fungsi pemprosesan acara yang ditambah secara langsung melalui addEventListener, memintas React dan panggilan tak segerak yang dijana melalui setTimeout/setInterval.

Sebab:

Dalam pelaksanaan fungsi setState React, ia akan dinilai berdasarkan pembolehubah isBatchingUpdates sama ada untuk mengemas kini this.state terus atau meletakkannya dalam baris gilir dan bercakap mengenainya kemudian, dan isBatchingUpdates Lalai adalah palsu, yang bermaksud setState akan mengemas kini this.state secara serentak Namun, terdapat fungsi batchedUpdates ini akan menukar isBatchingUpdates kepada benar fungsi, akibatnya ialah: Iaitu, proses pemprosesan acara setState dikawal oleh React tidak akan mengemas kini this.state secara serentak.

Untuk butiran, sila lihat https://github.com/LuNaHaiJiao/blog/issues/26

Pembelajaran yang disyorkan: "

tutorial video bertindak balas

"

Atas ialah kandungan terperinci Bilakah keadaan set reaksi disegerakkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!