Kitaran hayat tindak balas dibahagikan kepada beberapa peringkat

Kitaran hayat tindak balas dibahagikan kepada 3 peringkat iaitu: 1. Peringkat penciptaan, juga dikenali sebagai peringkat permulaan, yang mewakili proses apabila komponen dipaparkan dalam pepohon DOM buat kali pertama; 2. Peringkat kemas kini, juga dikenali sebagai peringkat permulaan Ia dipanggil peringkat kewujudan, yang mewakili proses di mana komponen itu dipaparkan semula 3. Peringkat pemunggahan, juga dipanggil peringkat pemusnahan, mewakili proses di mana komponen itu dipadamkan daripada DOM.

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

Kitaran hayat tindak balas dibahagikan kepada beberapa peringkat

Konsep kitaran hayat digunakan secara meluas, terutamanya dalam banyak bidang seperti ekonomi, alam sekitar, teknologi, masyarakat dan sebagainya makna biasanya boleh difahami sebagai keseluruhan proses "buaian ke kubur"

Seperti Vue, keseluruhan kitaran hayat komponen React termasuk penciptaan, permulaan data, penyusunan templat dan pemasangan Dom →Rendering , mengemas kini→Merender, menyahpasang dan satu siri proses

Proses

Di sini kita bercakap terutamanya tentang kitaran hayat selepas react16.4, yang boleh dibahagikan kepada tiga peringkat:

• Fasa Penciptaan

• Fasa Kemas Kini

• Fasa Nyahpasang

Penciptaan Fasa

Fasa penciptaan terbahagi terutamanya kepada kaedah kitaran hayat berikut:

• Pembina (jangan tanya saya mengapa saya menggunakan bahasa Cina, kerana bahasa Inggeris akan ditelan , terlalu sukar)

• getDerivedStateFromProps

• render

• componentDidMount

Pembina

Kaedah yang dipanggil secara automatik semasa proses contoh Di dalam kaedah, prop daripada komponen induk diperoleh melalui kata kunci super

Dalam. kaedah ini, operasi biasa ialah Initialize state atau mount the method on this

getDerivedStateFromProps

Kaedah ini ialah kaedah kitaran hayat baharu dan merupakan kaedah statik, jadi komponen tidak boleh diakses Contoh

Masa pelaksanaan: Semasa fasa pembuatan dan kemas kini komponen, sama ada prop berubah atau perubahan keadaan,

juga akan dipanggil sebelum setiap kaedah render Parameter pertama ialah yang akan dikemas kini prop, parameter kedua ialah keadaan keadaan sebelumnya Anda boleh membandingkan prop dan keadaan untuk menambah beberapa sekatan untuk mengelakkan kemas kini keadaan yang tidak berguna

Kaedah ini perlu mengembalikan yang baharu. object as the new state or return null Menunjukkan bahawa state tidak perlu dikemas kini

render

Kaedah yang komponen kelas mesti laksanakan untuk menjadikan struktur DOM. Anda boleh mengakses keadaan komponen dan atribut prop

Nota: Jangan setState dalam render, jika tidak, ia akan mencetuskan gelung tak terhingga dan menyebabkan ranap memori

componentDidMount

Komponen dilaksanakan selepas ia dipasang pada nod DOM sebenar, yang dilaksanakan dalam kaedah render Kemudian laksanakan

Kaedah ini kebanyakannya digunakan untuk melaksanakan beberapa pemerolehan data, pemantauan acara dan operasi lain

Fasa kemas kini

Fungsi dalam fasa ini terutamanya kaedah berikut:

• getDerivedStateFromProps

• sepatutnyaComponentUpdate

• render

• getSnapshotBeforeUpdate

• componentDidUpdate

getDerivedStateFromProps

Pengenalan kaedah ini adalah sama seperti di atas

shouldComponentUpdate

digunakan untuk memberitahu komponen itu sendiri sama ada ia perlu memaparkan semula komponen berdasarkan prop dan keadaan semasa Secara lalai, benar dikembalikan

Masa pelaksanaan: Ia akan dipanggil apabila prop atau keadaan baharu dicapai, dengan mengembalikan benar Atau palsu. sama ada komponen dikemas kini atau tidak

Secara amnya, tidak disyorkan untuk melakukan perbandingan mendalam dalam kaedah kitaran ini, yang akan menjejaskan kecekapan

Pada masa yang sama, setState tidak boleh dipanggil, jika tidak, ia akan menyebabkan gelung tak terhingga untuk memanggil kemas kini

memaparkan

Pengenalan adalah seperti di atas

getSnapshotBeforeUpdate

Fungsi berkala ini dilaksanakan selepas pemaparan Elemen DOM belum dikemas kini lagi

Nilai Syot Kilat yang dikembalikan oleh kaedah ini dihantar sebagai parameter ketiga componentDidUpdate

Tujuannya kaedah ini adalah untuk mendapatkan beberapa maklumat sebelum komponen dikemas kini Sebagai contoh, kedudukan tatal komponen, dsb., beberapa keadaan visual UI boleh dipulihkan berdasarkan maklumat ini selepas komponen dikemas kini

getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('#enter getSnapshotBeforeUpdate');
    return 'foo';
}
componentDidUpdate(prevProps, prevState, snapshot) {
    console.log('#enter componentDidUpdate snapshot = ', snapshot);
}

<.>componentDidUpdate

Masa pelaksanaan: selepas kemas kini komponen selesai PencetusDalam kaedah ini, anda boleh melakukan operasi yang sepadan berdasarkan perubahan dalam prop dan keadaan sebelum dan selepas, seperti seperti mendapatkan data, mengubah suai gaya DOM, dsb.

Fasa memunggah

componentWillUnmount

Kaedah ini digunakan untuk membersihkan beberapa acara mendengar berdaftar, atau batalkan permintaan rangkaian yang dilanggan, dsb. sebelum komponen dinyahpasang Setelah tika komponen dinyahpasang, ia tidak akan digunakan lagi, tetapi hanya boleh dibuat semula

Pembelajaran yang disyorkan.

tutorial video bertindak balas

"

Atas ialah kandungan terperinci Kitaran hayat tindak balas dibahagikan kepada beberapa peringkat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!