Apa itu “Mounting” di React js?

128

Saya terlalu sering mendengar istilah "mount" saat mempelajari ReactJS. Dan tampaknya ada metode siklus hidup dan kesalahan terkait istilah ini. Apa sebenarnya yang dimaksud dengan React dengan mount?

Contoh: componentDidMount() and componentWillMount()

javascript reactjs

— gerbang
sumber

138

Tugas utama React adalah mencari cara untuk memodifikasi DOM agar sesuai dengan komponen yang ingin ditampilkan di layar.

React melakukannya dengan "mount" (menambahkan node ke DOM), "unmounting" (menghapusnya dari DOM), dan "update" (membuat perubahan ke node yang sudah ada di DOM).

Bagaimana simpul React direpresentasikan sebagai simpul DOM dan di mana dan kapan ia muncul di pohon DOM dikelola oleh API tingkat atas . Untuk mendapatkan gambaran yang lebih baik tentang apa yang sedang terjadi, lihat contoh sesederhana mungkin:

// JSX version: let foo = <FooComponent />;
let foo = React.createElement(FooComponent);

Jadi apa foodan apa yang dapat Anda lakukan dengannya? foo, saat ini, adalah objek JavaScript biasa yang terlihat kurang lebih seperti ini (disederhanakan):

{
  type: FooComponent,
  props: {}
}

Saat ini tidak ada di mana pun di halaman, yaitu bukan elemen DOM, tidak ada di mana pun di pohon DOM dan, selain sebagai node elemen React, tidak memiliki representasi lain yang berarti dalam dokumen. Itu hanya memberi tahu React apa yang perlu ada di layar jika elemen React ini dirender. Ini belum "dipasang".

Anda dapat memberi tahu React untuk "memasang" ke container DOM dengan memanggil:

ReactDOM.render(foo, domContainer);

Ini memberi tahu React bahwa sudah waktunya untuk tampil foodi halaman. React akan membuat instance FooComponentkelas dan memanggil rendermetodenya. Katakanlah itu merender a <div />, dalam hal ini React akan membuat divsimpul DOM untuknya, dan memasukkannya ke dalam wadah DOM.

Proses pembuatan instance dan node DOM yang sesuai dengan komponen React, dan memasukkannya ke dalam DOM, disebut mount.

Perhatikan bahwa biasanya Anda hanya memanggil ReactDOM.render()untuk memasang komponen root. Anda tidak perlu "memasang" komponen anak secara manual. Setiap kali komponen induk memanggil setState(), dan rendermetodenya mengatakan bahwa anak tertentu harus dirender untuk pertama kalinya, React secara otomatis akan "memasang" anak ini ke induknya.

— Filip Dupanović
sumber

9

Saya ingin menunjukkan bahwa ketika Anda menelepon React.createElement(FooComponent)Anda tidak sedang membuat instance FooComponent. fooadalah representasi DOM virtual yang FooComponentjuga dikenal sebagai elemen React. Tapi mungkin itulah yang Anda maksud dengan FooComponenttipe React . Terlepas dari itu, Anda tidak memasang komponen di React, Anda memanggil render yang pada gilirannya mungkin memasang komponen jika simpul DOM yang sebenarnya perlu dibuat untuk mewakili komponen di pohon DOM. Pemasangan sebenarnya adalah peristiwa di mana hal ini terjadi untuk pertama kalinya.

— John Leidegren

5

Pemasangan mengacu pada melampirkan contoh komponen React ke simpul DOM yang diperlukan untuk melakukan pembaruan rendering pohon diffing / inkremental pada panggilan render berikutnya.

— John Leidegren

3

Saya mengambil kebebasan mengedit jawaban ini karena sudah diterima tetapi ada beberapa kesalahpahaman di dalamnya (misalnya Anda tidak dapat menjalankan findDOMNodeelemen React).

— Dan Abramov

1

@Rahamin unmount terjadi ketika komponen dilepas / diganti, jika Anda menavigasi antar adegan sedemikian rupa sehingga tidak ada rendering, Anda tidak dijamin akan mendapatkan sinyal unmount. componentWillUnmount tidak sama dengan pembongkaran halaman.

— John Leidegren

1

@Yossi inilah contoh dari eksplisit pemasangan dan un pemasangan komponen dalam test suite: stackoverflow.com/a/55359234/6225838

— CPHPython

38

React adalah framework isomorfik / universal . Artinya, terdapat representasi virtual dari pohon komponen UI, dan itu terpisah dari rendering sebenarnya yang dikeluarkannya di browser. Dari dokumentasi:

Bereaksi sangat cepat karena tidak pernah berbicara dengan DOM secara langsung. React mempertahankan representasi DOM dalam memori yang cepat.

Namun, representasi dalam memori itu tidak terikat langsung ke DOM di browser (meskipun disebut DOM Virtual, yang merupakan nama yang disayangkan dan membingungkan untuk kerangka aplikasi universal), dan ini hanya data seperti DOM- struktur yang mewakili semua hierarki komponen UI dan meta-data tambahan. DOM virtual hanyalah detail implementasi.

"Kami pikir fondasi sebenarnya dari React hanyalah ide dari komponen dan elemen: mampu mendeskripsikan apa yang ingin Anda render dengan cara deklaratif. Ini adalah bagian-bagian yang dibagikan oleh semua paket berbeda ini. Bagian dari React khusus untuk rendering tertentu target biasanya tidak seperti yang kita pikirkan saat memikirkan React. " - Bereaksi js Blog

Jadi, kesimpulannya adalah React is Rendering agnostic , yang artinya tidak peduli dengan hasil akhirnya. Ini bisa berupa Pohon DOM di browser, bisa berupa XML, komponen Native atau JSON.

"Saat kami melihat paket seperti react-native, react-art, react-canvas, dan react-three, jelas terlihat bahwa keindahan dan esensi React tidak ada hubungannya dengan browser atau DOM." - Bereaksi js Blog

Sekarang, setelah Anda mengetahui cara kerja React, sangat mudah untuk menjawab pertanyaan Anda :)

Pemasangan adalah proses mengeluarkan representasi virtual dari suatu komponen ke dalam representasi UI akhir (misalnya DOM atau Komponen Asli).

Di browser itu berarti mengeluarkan Elemen React ke dalam elemen DOM yang sebenarnya (misalnya, div HTML atau elemen li ) di pohon DOM. Dalam aplikasi asli, itu berarti mengeluarkan elemen React ke dalam komponen asli. Anda juga dapat menulis renderer Anda sendiri dan menampilkan komponen React ke dalam JSON atau XML atau bahkan XAML jika Anda memiliki keberanian.

Jadi, penangan pemasangan / pelepasan sangat penting untuk aplikasi React, karena Anda hanya bisa memastikan sebuah komponen di-output / dirender ketika dipasang . Namun, componentDidMountpenangan hanya dipanggil saat merender ke representasi UI yang sebenarnya (DOM atau Komponen Asli) tetapi tidak jika Anda merender ke string HTML di server menggunakan renderToString, yang masuk akal, karena komponen tidak benar-benar dipasang hingga mencapai browser dan menjalankannya di dalamnya.

Dan, ya, Mounting juga merupakan nama yang disayangkan / membingungkan, jika Anda bertanya kepada saya. IMHO componentDidRenderdan componentWillRenderakan menjadi nama yang jauh lebih baik.

— Faris Zacina
sumber

6

Seseorang baru saja mengarahkan saya ke jawaban ini dari forum lain. Saya tidak berpikir componentDidRenderitu pengganti componentDidMountkarena komponen dapat membuat beberapa kali ketika alat peraga berubah setelah dipasang sekali.

— Gaurav

@TheMinister Ini disebut perpustakaan "DOM virtual" karena tidak dimulai sebagai isomorfik, tetapi sebenarnya terkait dengan DOM sejak awal. Itu adalah renungan untuk membuatnya isomorfik.

— Isiah Meadows

Jadi, mount dapat dipertukarkan dengan render ? Dalam hal ini, apakah benar bahwa sebuah komponen dipasang / dirender untuk masing-masing hipotesis berikut ?: (id === that.id) ? <Component /> : null| /app/items/:id| this.setState(...).

— Cody

1

Tautan ke / react-js-the-king-of-universal-apps / rusak

— Michael Freidgeim

Saya mengedit posting dua kali untuk menghapus tautan yang rusak /react-js-the-king-of-universal-apps/( dengan edit-komentar dengan jelas menyebutkan bahwa itu adalah tautan yang rusak ), tetapi rekan-rekan telah menolak edit kedua kali . Dapatkah seseorang memandu saya apa yang salah dalam mengedit jawaban dan menghapus tautan yang rusak?

— Aaditya Sharma

12

Mounting mengacu pada komponen di React (node DOM yang dibuat) yang dilampirkan ke beberapa bagian dokumen. Itu dia!

Mengabaikan React, Anda dapat menganggap kedua fungsi asli ini sebagai mount:

replaceChild

appendChild

Yang merupakan fungsi paling umum yang digunakan React untuk dipasang secara internal.

Pikirkan tentang:

componentWillMount === sebelum dipasang

Dan:

componentDidMount === setelah pemasangan

— bagian depan
sumber

Jika pemasangannya mirip appendChild, apa itu render?

— Deke

Saya pikir Anda bisa mengatakan renderadalah metode sebenarnya yang akan melakukan pemasangan itu sendiri. Jadi componentWillMount== sebelum, render== melakukan penyisipan DOM, dan componentDidMount== setelah pemasangan (atau rendertelah memanggil API DOM untuk menyisipkan komponen dan operasi asinkron telah selesai sepenuhnya)

— Rob

8

https://facebook.github.io/react/docs/tutorial.html

Di sini, componentDidMount adalah metode yang dipanggil secara otomatis oleh React ketika sebuah komponen dirender.

Konsepnya adalah Anda memberi tahu ReactJS, "silakan ambil benda ini, kotak komentar ini atau gambar berputar atau apa pun yang saya inginkan di halaman browser, dan lanjutkan dan taruh di halaman browser. Setelah selesai, hubungi fungsi saya yang terikat componentDidMountsehingga saya bisa melanjutkan. "

componentWillMountadalah sebaliknya. Ini akan segera aktif SEBELUM merender komponen Anda.

Lihat juga di sini https://facebook.github.io/react/docs/component-specs.html

Akhirnya, istilah "mount" tampaknya unik untuk react.js. Saya tidak berpikir ini adalah konsep javascript umum, atau bahkan konsep browser umum.

— Ross Presser
sumber

jadi mount bisa disebut "ditempatkan"?

— gerbang

Saya akan berkata begitu, ya.

— Ross Presser

Saya akan mengatakan bahwa kutipan itu agak menyesatkan, karena hanya dipanggil setelah render awal , bukan pada rendering ulang yang disebabkan oleh pembaruan. Kemudian componentDidUpdatedisebut sebagai gantinya.

— Hannes Johansson

+1 untuk facebook.github.io/react/docs/… ini , deskripsi di sana mengonfirmasi penempatannya;)

— gerbang

5

Mounting mengacu pada pemuatan halaman awal ketika komponen React Anda pertama kali dirender. Dari dokumentasi React untuk Mounting: componentDidMount:

Invoked once, only on the client (not on the server), immediately after the initial rendering occurs. At this point in the lifecycle, the component has a DOM representation which you can access via React.findDOMNode(this).

Anda dapat membandingkan ini dengan fungsi componentDidUpdate, yang dipanggil setiap kali React merender (kecuali untuk pemasangan awal).

— Mark Brownsword
sumber

3

Tujuan utama React js adalah membuat komponen yang dapat digunakan kembali. Di sini, komponen adalah bagian individual dari halaman web. Misalnya, di halaman web, header adalah komponen, footer adalah komponen, pemberitahuan toast adalah komponen, dan lain-lain. Istilah "mount" memberi tahu kita bahwa komponen ini dimuat atau dirender di DOM. Ada banyak API dan metode tingkat atas yang menangani hal ini.

Sederhananya, mount berarti komponen telah dimuat ke DOM dan unmount berarti komponen telah dihapus dari DOM.

— Pranesh Ravi
sumber