ReactJS - Apakah render dipanggil kapan saja "setState" dipanggil?

Apakah Bereaksi ulang membuat semua komponen dan sub komponen setiap kali setStatedipanggil?

Jika demikian, mengapa? Saya pikir idenya adalah bahwa Bereaksi hanya memberikan sesedikit yang diperlukan - ketika keadaan berubah.

Dalam contoh sederhana berikut, kedua kelas merender lagi ketika teks diklik, terlepas dari kenyataan bahwa keadaan tidak berubah pada klik berikutnya, karena penangan onClick selalu menetapkan nilai stateyang sama:

this.setState({'test':'me'});

Saya akan berharap bahwa rendering hanya akan terjadi jika statedata telah berubah.

Berikut kode contohnya, sebagai JS Fiddle , dan cuplikan yang disematkan:

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

[1]: http://jsfiddle.net/fp2tncmb/2/

Apakah Bereaksi ulang membuat semua komponen dan sub-komponen setiap kali setState dipanggil?

Secara default - ya.

Ada metode boolean shouldComponentUpdate (objek nextProps, objek nextState) , setiap komponen memiliki metode ini dan bertanggung jawab untuk menentukan "haruskah komponen diperbarui (jalankan fungsi render )?" setiap kali Anda mengubah negara atau lulus baru alat peraga dari komponen induk.

Anda dapat menulis implementasi Anda sendiri dari metode shouldComponentUpdate untuk komponen Anda, tetapi implementasi default selalu mengembalikan true - artinya selalu menjalankan kembali fungsi render.

Kutipan dari dokumen resmi http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

Secara default, shouldComponentUpdate selalu mengembalikan true untuk mencegah bug halus ketika negara dimutasi di tempat, tetapi jika Anda berhati-hati untuk selalu memperlakukan negara sebagai tidak berubah dan hanya-baca dari alat peraga dan status dalam render () maka Anda dapat menimpa shouldComponentUpdate dengan sebuah implementasi yang membandingkan alat peraga lama dan negara bagian dengan penggantiannya.

Bagian selanjutnya dari pertanyaan Anda:

Jika demikian, mengapa? Saya pikir idenya adalah bahwa Bereaksi hanya memberikan sesedikit yang diperlukan - ketika negara berubah.

Ada dua langkah yang dapat kita sebut "render":

1. Virtual DOM renders: ketika metode render dipanggil, ia mengembalikan struktur dom virtual baru dari komponen. Seperti yang saya sebutkan sebelumnya, metode render ini dipanggil selalu ketika Anda memanggil setState () , karena shouldComponentUpdate selalu mengembalikan true secara default. Jadi, secara default, tidak ada optimasi di sini di Bereaksi.

2. Render DOM asli: Bereaksi mengubah node DOM nyata di browser Anda hanya jika diubah di Virtual DOM dan sesedikit yang diperlukan - ini adalah fitur React yang hebat yang mengoptimalkan mutasi DOM nyata dan membuat Bereaksi cepat.

Tidak, Bereaksi tidak merender segalanya saat status berubah.

• Setiap kali komponen kotor (kondisinya berubah), komponen itu dan anak-anaknya dirender kembali. Ini, sampai batas tertentu, adalah untuk membuat ulang sesedikit mungkin. Satu-satunya waktu ketika render tidak dipanggil adalah ketika beberapa cabang dipindahkan ke root lain, di mana secara teoritis kita tidak perlu merender ulang apa pun. Dalam contoh Anda,TimeInChild adalah komponen turunan dari Main, sehingga komponen tersebut juga akan ditampilkan ulang saat status Mainperubahan.

• Bereaksi tidak membandingkan data status. Ketika setStatedipanggil, itu menandai komponen sebagai kotor (yang berarti perlu dirender ulang). Yang penting untuk dicatat adalah bahwa meskipun rendermetode komponen disebut, DOM yang asli hanya diperbarui jika output berbeda dari pohon DOM saat ini (alias berbeda antara pohon DOM Virtual dan pohon DOM dokumen). Dalam contoh Anda, meskipun statedata tidak berubah, waktu perubahan terakhir terjadi, membuat Virtual DOM berbeda dari DOM dokumen, karenanya mengapa HTML diperbarui.

Meskipun dinyatakan dalam banyak jawaban lain di sini, komponennya harus:

• menerapkan shouldComponentUpdateuntuk membuat hanya ketika keadaan atau properti berubah

• beralih ke memperluas PureComponent , yang sudah mengimplementasikan shouldComponentUpdatemetode secara internal untuk perbandingan yang dangkal.

Berikut adalah contoh yang menggunakan shouldComponentUpdate, yang hanya berfungsi untuk kasus penggunaan sederhana dan tujuan demonstrasi. Saat ini digunakan, komponen tidak lagi merender sendiri pada setiap klik, dan diberikan saat pertama kali ditampilkan, dan setelah itu diklik sekali.

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

Iya. Itu memanggil metode render () setiap kali kita memanggil setState sebagai gantinya ketika "shouldComponentUpdate" mengembalikan false.

Alasan lain untuk "pembaruan yang hilang" dapat menjadi alasan berikut:

• Jika getDerivedStateFromProps statis ditentukan, maka jalankan kembali dalam setiap proses pembaruan sesuai dengan dokumentasi resmi https://reactjs.org/docs/react-component.html#updating .
• jadi jika nilai status itu berasal dari alat peraga di awal itu ditimpa dalam setiap pembaruan.

Jika itu masalahnya maka Anda dapat menghindari pengaturan negara selama pembaruan, Anda harus memeriksa nilai parameter keadaan seperti ini

static getDerivedStateFromProps(props: TimeCorrectionProps, state: TimeCorrectionState): TimeCorrectionState {
   return state ? state : {disable: false, timeCorrection: props.timeCorrection};
}

Solusi lain adalah menambahkan properti yang diinisialisasi ke negara, dan mengaturnya di pertama kalinya (jika negara diinisialisasi ke nilai non null.)

Tidak Semua Komponen.

itu state dalam penampilan komponen seperti sumber air terjun negara dari seluruh APP.

Jadi perubahan terjadi dari mana setState dipanggil. Pohon itu renderslalu dipanggil dari sana. Jika Anda telah menggunakan komponen murni, maka renderakan dilewati.