Bagaimana cara mereset komponen react termasuk semua status yang dapat dijangkau secara transitif?

Saya kadang-kadang bereaksi komponen yang secara konseptual stateful yang ingin saya setel ulang. Perilaku ideal akan sama dengan menghapus komponen lama dan membaca komponen baru yang asli.

React menyediakan metode setStateyang memungkinkan pengaturan status eksplisit komponen, tetapi tidak termasuk status implisit seperti fokus browser dan status formulir, dan juga mengecualikan status turunannya. Menangkap semua keadaan tidak langsung itu bisa menjadi tugas yang rumit, dan saya lebih suka menyelesaikannya dengan teliti dan menyeluruh daripada bermain-main dengan setiap bagian baru yang mengejutkan.

Apakah ada API atau pola untuk melakukan ini?

Sunting: Saya membuat contoh sepele yang mendemonstrasikan this.replaceState(this.getInitialState())pendekatan dan membandingkannya dengan this.setState(this.getInitialState())pendekatan: jsfiddle - replaceStatelebih kuat.

Untuk memastikan bahwa status browser implisit yang Anda sebutkan dan status turunan disetel ulang, Anda bisa menambahkan keyatribut ke komponen level root yang dikembalikan oleh render; ketika berubah, komponen itu akan dibuang dan dibuat dari awal.

render: function() {
    // ...
    return <div key={uniqueId}>
        {children}
    </div>;
}

Tidak ada jalan pintas untuk mengatur ulang status lokal setiap komponen.

Anda harus benar-benar menghindari replaceStatedan menggunakan setStatesebagai gantinya.

Dokumen mengatakan bahwa replaceState"mungkin dihapus seluruhnya dalam versi React yang akan datang." Saya pikir itu pasti akan dihapus karena replaceStatetidak benar-benar sesuai dengan filosofi React. Ini memfasilitasi pembuatan komponen React mulai terasa seperti pisau swiss-y. Ini menghalangi pertumbuhan alami komponen React yang menjadi lebih kecil, dan lebih dibuat khusus.

Di React, jika Anda harus melakukan kesalahan pada generalisasi atau spesialisasi: bidiklah spesialisasi. Sebagai akibatnya, pohon status untuk komponen Anda harus memiliki kesederhanaan tertentu (tidak masalah untuk melanggar aturan ini dengan selera tinggi jika Anda merancang produk baru yang sangat bagus).

Bagaimanapun ini adalah bagaimana Anda melakukannya. Mirip dengan jawaban Ben (diterima) di atas, tetapi seperti ini:

this.setState(this.getInitialState());

Juga (seperti yang dikatakan Ben) untuk mengatur ulang "status browser" Anda perlu menghapus simpul DOM itu. Manfaatkan kekuatan vdom dan gunakan keyprop baru untuk komponen itu. Render baru akan menggantikan grosir komponen itu.

Referensi: https://facebook.github.io/react/docs/component-api.html#replacestate

Menambahkan keyatribut ke elemen yang Anda perlukan untuk menginisialisasi ulang, akan memuatnya kembali setiap kali propsatau stateterkait dengan perubahan elemen.

kunci = {Tanggal baru (). getTime ()}

Berikut ini contohnya:

render() {
  const items = (this.props.resources) || [];
  const totalNumberOfItems = (this.props.resources.noOfItems) || 0;

  return (
    <div className="items-container">
      <PaginationContainer
        key={new Date().getTime()}
        totalNumberOfItems={totalNumberOfItems}
        items={items}
        onPageChange={this.onPageChange}
      />
    </div>
  );
}