Apakah boleh menggunakan React.render () beberapa kali di DOM?

107

Saya ingin menggunakan React untuk menambahkan komponen beberapa kali di seluruh DOM. Biola ini menunjukkan apa yang ingin saya lakukan, dan tidak menimbulkan kesalahan. Berikut kodenya:

HTML:

<div id="container">
    <!-- This element's contents will be replaced with the first component. -->
</div>

<div id="second-container">
    <!-- This element's contents will be replaced with the second component. -->
</div>

JS:

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

React.render(<Hello name="Second World" />, document.getElementById('second-container'));

Saya telah melihat pertanyaan ini dan saya khawatir dengan melakukan hal di atas, saya akan mempertaruhkan komponen React yang saling mengganggu. Jawaban untuk pertanyaan itu menyarankan menggunakan perenderan sisi server yang bukan pilihan bagi saya karena saya menggunakan sisi server Django.

Di sisi lain, mungkin yang saya lakukan tidak apa-apa karena saya hanya memiliki satu contoh pustaka React yang dipasang (sebagai lawan dari beberapa komponen yang memanggil contoh React mereka sendiri)?

Apakah cara menggunakan beberapa contoh DOM ini merupakan cara yang baik untuk menggunakan React?

reactjs

— YPCrumble
sumber

Jawaban:

120

Ya, tidak masalah untuk menelepon React.renderbeberapa kali di halaman yang sama. Seperti yang Anda sarankan, pustaka React sendiri hanya dimuat satu kali, tetapi setiap panggilan ke React.renderakan membuat instance komponen baru yang independen dari yang lain. (Faktanya, situasi seperti itu tidak jarang terjadi pada situs yang sedang dalam proses transisi ke React, di mana beberapa bagian halaman dibuat menggunakan React.renderdan yang lainnya tidak.)

— pelompat
sumber

mengagumkan - ini juga sangat membantu dalam "mengisi daya" aplikasi Django yang ada. Saya ingin menggunakan Django untuk konten yang dirender untuk mendapatkan SEO, dan menggunakan React untuk interaksi pengguna dengan elemen DOM. Ini membuatnya sangat mudah untuk dicapai.

— YPCrumble

Anda mungkin juga dapat melihat shouldComponentUpdate dan dapat meningkatkan kinerja di masa mendatang (mungkin tidak dalam kasus Anda). Berikut referensinya: facebook.github.io/react/docs/component-specs.html

— Jim

@YPCrumble jika jawaban hopper benar, harap tandai

— Dana Woodman

Dan bagaimana dengan kasus ketika ada beberapa ReactDOM.render()yang harus memasukkan komponen yang sama divtergantung pada halaman apa yang Anda buka? Secara khusus, Anda hanya memiliki satu app.jsaset gabungan yang jelek yang Anda miliki <script src="app.js">di setiap halaman. Dan itu memuat libs, katakanlah, jQuery, Bootstrap, React dan memiliki kode JS khusus dan Komponen React Anda. Jika Anda berkunjung /foo, Anda punya ReactDOM.render(<Foo />, getElemById('content')). Jika Anda mengunjungi /bar', you have ReactDOM.render (<Bar />, getElemById ('content')) `. Mereka memang ikut campur. Bagaimana Anda mengelola ini?

— Hijau

@ Hijau Saya tidak yakin saya mengerti, jika komponen berada di halaman terpisah bagaimana mereka akan mengganggu? Jika tidak, mengapa tidak menambahkan elemen kontainer baru untuk setiap komponen, yaitu:ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))

— hopper

Pendekatan ini baik-baik saja dari sudut pandang kinerja pemuatan halaman, tetapi ada kelemahan lain dan beberapa root React harus dihindari jika memungkinkan.

Root React yang berbeda tidak dapat berbagi konteks, dan jika Anda perlu berkomunikasi di antara root React, Anda perlu fallback pada event DOM global
Anda mendapatkan lebih sedikit manfaat dari pengoptimalan kinerja seperti pembagian waktu - ketegangan dan rendering asinkron. Tidak mungkin untuk menangguhkan melintasi batas root React

Lebih banyak raeding - https://github.com/facebook/react/issues/12700

— Yangshun Tay
sumber