Apa itu “Mounting” di React js?

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()

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.

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.

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

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.

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).

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.