React.render () 'ı DOM içinde birden çok kez kullanmak uygun mudur?

107

DOM içinde birden çok kez bileşen eklemek için React'i kullanmak istiyorum. Bu keman yapmak istediğimi gösteriyor ve herhangi bir hata yapmıyor. İşte kod:

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'));

Bu soruyu gördüm ve korkarım ki yukarıdakileri yaparak, React bileşenlerinin birbirini etkilemesi riskini almış olacağım. Bu sorunun cevabı, Django sunucu tarafı kullandığım için benim için bir seçenek olmayan sunucu tarafı oluşturmayı öneriyor.

Öte yandan, belki de yaptığım şey tamamdır çünkü React kütüphanesinin yalnızca bir örneğini bağladım (kendi React örneğini çağıran birden fazla bileşenin aksine)?

Birden fazla DOM örneğini bu şekilde kullanmanın React'i kullanmanın uygun bir yolu var mı?

reactjs

— YPCrumble
kaynak

Yanıtlar:

120

Evet, React.renderaynı sayfada birden çok kez aramak tamamen iyidir . Tam da önerdiğiniz gibi, React kitaplığının kendisi yalnızca bir kez yüklenir, ancak her çağrı, React.renderdiğerlerinden bağımsız yeni bir bileşen örneği oluşturacaktır. (Aslında böyle bir durum, sayfanın bazı bölümlerinin kullanılarak üretildiği React.renderve diğerlerinin oluşturulmadığı React'e geçiş sürecinde olan sitelerde nadir değildir.)

— hazne
kaynak

harika - aynı zamanda mevcut bir Django uygulamasının "aşırı yüklenmesinde" son derece yararlıdır. SEO almak için işlenen içerik için Django'yu ve DOM öğeleriyle kullanıcı etkileşimi için React'i kullanmak istiyorum. Bu, elde etmeyi çok kolaylaştırır.

— YPCrumble

Muhtemelen shouldComponentUpdate'e de bakabilirsiniz ve gelecekte performansı başlatabilir (muhtemelen sizin durumunuzda değil). İşte referans: facebook.github.io/react/docs/component-specs.html

— Jim

@YPCrumble Eğer hunilerin cevabı doğruysa lütfen işaretleyin

— Dana Woodman

Ve hangi sayfayı açtığınıza bağlı olarak ReactDOM.render()aynı içeri bileşen eklemek zorunda olan birden fazla bileşen olduğunda durum ne divolacak? Özellikle, her sayfada bulunduğunuz tek bir çirkinleştirilmiş birleştirilmiş app.jsvarlığınız var <script src="app.js">. Ve bu, jQuery, Bootstrap, React gibi kütüphaneleri yükler ve özel JS kodunuza ve React Bileşenlerine sahiptir. Eğer ziyaret /fooedersen, var ReactDOM.render(<Foo />, getElemById('content')). /bar', you have ReactDOM.render (<Bar />, getElemById ('içerik')) 'i ziyaret ederseniz. Müdahale ediyorlar. Bunu nasıl yönetiyorsunuz?

— Yeşil

@ Yeşil Anladığımdan emin değilim, bileşenler ayrı sayfalarda olsaydı nasıl müdahale ederlerdi? Aksi takdirde, neden her bileşen için yeni bir konteyner öğesi ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))

— besleme hunisi

Bu yaklaşım, sayfa yükleme performansı açısından uygundur, ancak başka dezavantajlar da vardır ve mümkünse birden fazla React kökünden kaçınılmalıdır.

Farklı React kökleri bağlam paylaşamaz ve React kökleri arasında iletişim kurmanız gerekirse, genel DOM olaylarına geri dönmeniz gerekecektir.
Zaman dilimleme - gerilim ve zaman uyumsuz oluşturma gibi performans optimizasyonlarından daha az yararlanırsınız . React kök sınırlarında askıya almak mümkün değildir

Daha fazla yağmurlama - https://github.com/facebook/react/issues/12700

— Yangshun Tay
kaynak