Fasa Pemaparan dan Komit DOM

Kitaran kerja React mempunyai dua fasa utama: fasa pemaparan dan fasa komit. Semasa fasa pemaparan, React memanggil fungsi komponen anda dan membina perwakilan maya antara muka pengguna (pepohon gentian). Semasa fasa komit, React menggunakan perubahan daripada pepohon gentian pada DOM sebenar.

Dalam Mod Serentak React 18, fasa pemaparan boleh dijeda, disela atau dimulakan semula. React mungkin memanggil fungsi komponen anda beberapa kali sebelum melakukan apa-apa komit. Oleh sebab itu, fungsi komponen mestilah tulen — fungsi tersebut tidak boleh mempunyai kesan sampingan kerana ia mungkin dijalankan lebih daripada sekali bagi setiap kemas kini yang kelihatan.

Tidak seperti fasa pemaparan, fasa komit sentiasa segerak dan berjalan hingga selesai. React tidak boleh disela semasa melakukan perubahan pada DOM. Ini memastikan DOM tidak pernah dibiarkan dalam keadaan dikemas kini separa. Pengguna sentiasa melihat antara muka pengguna yang sepenuhnya konsisten selepas setiap komit.

Fasa komit mempunyai tiga subfasa: sebelum mutasi (komponen kelas getSnapshotBeforeUpdate dijalankan di sini untuk membaca nilai DOM sebelum perubahan), mutasi (React menyisipkan, mengemas kini dan mengalih keluar nod DOM), dan susun atur (kesan segerak dijalankan di sini, khususnya useLayoutEffect serta componentDidMount/componentDidUpdate komponen kelas).

useEffect ialah kesan pasif, yang bermaksud ia tidak dijalankan semasa fasa komit. Selepas fasa komit selesai dan pelayar selesai memaparkan halaman, React menjadualkan kesan pasif secara tak segerak. Kesan ini dijalankan selepas pelayar mendapat peluang untuk memaparkan DOM yang dikemas kini pada skrin.

Pelayar memaparkan halaman antara fasa susun atur (tempat useLayoutEffect dijalankan) dengan fasa kesan pasif (tempat useEffect dijalankan). Inilah perbezaan masa yang penting: useLayoutEffect dijalankan sebelum pemaparan, manakala useEffect dijalankan selepas pemaparan. Bagi kesan yang mengubah keluaran visual, perbezaan ini amat penting.

Jika useEffect membaca DOM dan mengemas kini keadaan (contohnya, mengukur elemen dan menetapkan keadaan saiz), React akan memaparkan semula serta melakukan komit sekali lagi. Pelayar memaparkan halaman dua kali: sekali dengan saiz awal dan sekali dengan saiz yang dibetulkan. Pengguna mungkin melihat sekelip ukuran yang salah sebelum pembetulan muncul.

React membina pepohon nod "gentian" secara dalaman, satu bagi setiap tika komponen. Setiap gentian menyimpan keadaan, kesan dan hasil komponen tersebut. Semasa fasa pemaparan, React mencipta pepohon gentian kerja yang sedang dijalankan. Semasa fasa penerapan, pepohon kerja yang sedang dijalankan menjadi pepohon semasa, manakala pepohon lama dikitar semula.

Mod Ketat React sengaja memanggil fungsi komponen dan kesan sebanyak dua kali dalam pembangunan untuk membantu mengesan kesan sampingan. Kedua-dua useLayoutEffect dan useEffect dipasang, dinyahpasang dan dipasang semula. Pemanggilan dua kali ini tidak berlaku dalam pengeluaran. Ciri ini direka untuk mendedahkan pepijat apabila kesan tidak dibersihkan dengan betul.

Oleh sebab fasa pemaparan boleh terganggu dan dijalankan semula, fungsi komponen mesti menghasilkan keluaran yang sama bagi masukan yang sama tanpa kesan sampingan. Mutasi, langganan dan panggilan API dalam badan fungsi, bukan dalam kesan, akan dijalankan lebih banyak kali daripada yang dijangka dalam Mod Serentak, lalu menyebabkan pepijat.

Jangan baca sifat DOM secara langsung di dalam badan fungsi komponen. DOM mungkin belum wujud, seperti dalam pemaparan pelayan, atau mungkin sudah lapuk ketika pemaparan semula. Sentiasa baca DOM di dalam useLayoutEffect untuk bacaan sebelum pelukisan atau useEffect untuk bacaan selepas pelukisan, apabila DOM dijamin terkini.

Fasa pemaparan React membina pepohon gentian dan boleh terganggu; fasa penerapan menggunakan perubahan pada DOM dan sentiasa berjalan secara segerak. Penerapan mempunyai tiga subfasa: sebelum mutasi, mutasi dan atur letak. useLayoutEffect dicetuskan dalam fasa atur letak sebelum pelukisan. useEffect dicetuskan sebagai kesan pasif selepas pelukisan.