Apakah Bereaksi menjaga urutan pembaruan negara?

Saya tahu bahwa Bereaksi dapat melakukan pembaruan status secara tidak sinkron dan sekaligus untuk optimasi kinerja. Karena itu Anda tidak pernah bisa mempercayai keadaan yang akan diperbarui setelah menelepon setState. Tapi yang dapat Anda percaya Bereaksi untuk memperbarui negara dalam urutan yang sama seperti setStateyang disebut untuk

1. komponen yang sama?
2. komponen yang berbeda?

Pertimbangkan mengklik tombol dalam contoh berikut:

1. Apakah ada kemungkinan bahwa a salah dan b benar untuk:

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false, b: false };
  }

  render() {
    return <Button onClick={this.handleClick}/>
  }

  handleClick = () => {
    this.setState({ a: true });
    this.setState({ b: true });
  }
}

2. Adakah kemungkinan bahwa a salah dan b benar untuk:

class SuperContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false };
  }

  render() {
    return <Container setParentState={this.setState.bind(this)}/>
  }
}

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { b: false };
  }

  render() {
    return <Button onClick={this.handleClick}/>
  }

  handleClick = () => {
    this.props.setParentState({ a: true });
    this.setState({ b: true });
  }
}

Perlu diingat bahwa ini adalah penyederhanaan ekstrim dari use case saya. Saya menyadari bahwa saya dapat melakukan ini secara berbeda, misalnya memperbarui kedua param negara bagian pada saat yang sama dalam contoh 1, serta melakukan pembaruan keadaan kedua dalam panggilan balik ke pembaruan keadaan pertama dalam contoh 2. Namun, ini bukan pertanyaan saya, dan saya hanya tertarik jika ada cara yang terdefinisi dengan baik bahwa React melakukan pembaruan status ini, tidak ada yang lain.

Setiap jawaban yang didukung oleh dokumentasi sangat dihargai.

Saya mengerjakan React.

TLDR:

Tapi bisakah Anda percaya Bereaksi untuk memperbarui keadaan dalam urutan yang sama seperti setState dipanggil untuk

• komponen yang sama?

Iya.

• komponen yang berbeda?

Iya.

The rangka update selalu dihormati. Apakah Anda melihat kondisi antara "di antara" mereka atau tidak tergantung pada apakah Anda berada di dalam kumpulan atau tidak.

Saat ini (Bereaksi 16 dan sebelumnya), hanya pembaruan di dalam penangan aktivitas Bereaksi yang di-batch secara default . Ada API yang tidak stabil untuk memaksa batching di luar event handler untuk kasus yang jarang terjadi saat Anda membutuhkannya.

Dalam versi yang akan datang (mungkin Bereaksi 17 dan yang lebih baru), Bereaksi akan mengelompokkan semua pembaruan secara default sehingga Anda tidak perlu memikirkan hal ini. Seperti biasa, kami akan mengumumkan perubahan apa pun tentang ini di blog Bereaksi dan dalam catatan rilis.

Kunci untuk memahami ini adalah bahwa tidak peduli berapa banyak setState()panggilan dalam berapa banyak komponen yang Anda lakukan di dalam penangan peristiwa Bereaksi , mereka hanya akan menghasilkan render tunggal pada akhir acara . Ini sangat penting untuk kinerja yang baik dalam aplikasi besar karena jika Childdan Parentsetiap panggilan setState()saat menangani acara klik, Anda tidak ingin merender ulang Childdua kali.

Dalam kedua contoh Anda, setState()panggilan terjadi di dalam pengendali event Bereaksi. Oleh karena itu mereka selalu memerah bersama di akhir acara (dan Anda tidak melihat negara perantara).

Pembaruan selalu dangkal digabung dalam urutan terjadinya . Jadi, jika pembaruan pertama adalah {a: 10}, yang kedua adalah {b: 20}, dan yang ketiga adalah {a: 30}, keadaan yang diberikan akan {a: 30, b: 20}. Pembaruan yang lebih baru untuk kunci negara yang sama (misalnya seperti adalam contoh saya) selalu "menang".

The this.stateobjek diperbarui ketika kita kembali membuat UI pada akhir bets. Jadi, jika Anda perlu memperbarui negara berdasarkan keadaan sebelumnya (seperti menambah penghitung), Anda harus menggunakan setState(fn)versi fungsional yang memberi Anda keadaan sebelumnya, alih-alih membaca dari this.state. Jika Anda penasaran dengan alasan untuk ini, saya jelaskan secara mendalam dalam komentar ini .

Dalam contoh Anda, kami tidak akan melihat "keadaan perantara" karena kami berada di dalam penangan peristiwa Bereaksi tempat batching diaktifkan (karena Bereaksi "tahu" ketika kita keluar dari peristiwa itu).

Namun, baik dalam Bereaksi 16 dan versi sebelumnya, belum ada batching secara default di luar penangan event Bereaksi . Jadi, jika dalam contoh Anda, kami memiliki penangan respons AJAX alih-alih handleClick, masing setState()- masing akan segera diproses begitu terjadi. Dalam hal ini, ya, Anda akan melihat kondisi perantara:

promise.then(() => {
  // We're not in an event handler, so these are flushed separately.
  this.setState({a: true}); // Re-renders with {a: true, b: false }
  this.setState({b: true}); // Re-renders with {a: true, b: true }
  this.props.setParentState(); // Re-renders the parent
});

Kami menyadari tidak nyaman bahwa perilakunya berbeda tergantung pada apakah Anda berada dalam event handler atau tidak . Ini akan berubah di versi Bereaksi masa depan yang akan mengelompokkan semua pembaruan secara default (dan menyediakan API keikutsertaan untuk menyiram perubahan secara sinkron). Sampai kami beralih perilaku default (berpotensi dalam Bereaksi 17), ada API yang dapat Anda gunakan untuk memaksa batching :

promise.then(() => {
  // Forces batching
  ReactDOM.unstable_batchedUpdates(() => {
    this.setState({a: true}); // Doesn't re-render yet
    this.setState({b: true}); // Doesn't re-render yet
    this.props.setParentState(); // Doesn't re-render yet
  });
  // When we exit unstable_batchedUpdates, re-renders once
});

React event handler internal semuanya dibungkus unstable_batchedUpdatesdan itulah sebabnya mereka dikelompokkan secara default. Perhatikan bahwa membungkus pembaruan unstable_batchedUpdatesdua kali tidak berpengaruh. Pembaruan memerah ketika kita keluar dari unstable_batchedUpdatespanggilan terluar .

API itu "tidak stabil" dalam arti bahwa kami akan menghapusnya ketika batching sudah diaktifkan secara default. Namun, kami tidak akan menghapusnya dalam versi kecil, sehingga Anda dapat dengan aman mengandalkannya sampai Bereaksi 17 jika Anda perlu memaksa batching dalam beberapa kasus di luar React event handler.

Singkatnya, ini adalah topik yang membingungkan karena Bereaksi hanya kumpulan di dalam penangan acara secara default. Ini akan berubah di versi masa depan, dan perilaku akan lebih mudah. Tapi solusinya bukan batch lebih sedikit , itu untuk batch lebih banyak secara default. Itu yang akan kita lakukan.

Ini sebenarnya pertanyaan yang cukup menarik tetapi jawabannya tidak boleh terlalu rumit. Ada artikel bagus tentang media yang memiliki jawaban.

1) Jika Anda melakukan ini

this.setState({ a: true });
this.setState({ b: true });

Saya tidak berpikir bahwa akan ada situasi di mana aakan truedan bakan falsekarena batching .

Namun, jika btergantung padaa maka mungkin memang ada situasi di mana Anda tidak akan mendapatkan keadaan yang diharapkan.

// assuming this.state = { value: 0 };
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});

Setelah semua panggilan di atas diproses this.state.valueakan menjadi 1, bukan 3 seperti yang Anda harapkan.

Ini disebutkan dalam artikel: setState accepts a function as its parameter

// assuming this.state = { value: 0 };
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));

Ini akan memberi kita this.state.value === 3

Beberapa panggilan selama siklus yang sama dapat dikumpulkan bersamaan. Misalnya, jika Anda berupaya menambah jumlah item lebih dari satu kali dalam siklus yang sama, itu akan menghasilkan yang setara dengan:

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

https://reactjs.org/docs/react-component.html

seperti dalam doc

setState () memberikan perubahan pada status komponen dan memberi tahu Bereaksi bahwa komponen ini dan anak-anaknya perlu dirender ulang dengan keadaan yang diperbarui. Ini adalah metode utama yang Anda gunakan untuk memperbarui antarmuka pengguna sebagai respons terhadap penangan peristiwa dan respons server.

itu akan membentuk sebelumnya perubahan seperti dalam antrian ( FIFO : First In First Out) panggilan pertama akan menjadi yang pertama untuk membentuk sebelumnya