Va bene usare React.render () più volte nel DOM?

107

Voglio usare React per aggiungere componenti più volte in tutto il DOM. Questo violino mostra quello che sto cercando di fare e non genera errori. Ecco il codice:

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

Ho visto questa domanda e temo che facendo quanto sopra, rischierò che i componenti React interferiscano tra loro. La risposta a questa domanda suggerisce di utilizzare il rendering lato server che non è un'opzione per me poiché sto usando Django lato server.

D'altra parte, forse quello che sto facendo è OK perché ho solo un'istanza della libreria React montata (al contrario di più componenti che chiamano la propria istanza di React)?

Questo modo di utilizzare più istanze DOM è un modo corretto per utilizzare React?

reactjs

— YPCrumble
fonte

Risposte:

120

Sì, va benissimo chiamare React.renderpiù volte sulla stessa pagina. Proprio come hai suggerito, la libreria React stessa viene caricata solo una volta, ma ogni chiamata a React.rendercreerà una nuova istanza del componente indipendente da tutte le altre. (In effetti, una situazione del genere non è insolita sui siti che sono in fase di transizione a React, dove alcune parti della pagina vengono generate utilizzando React.rendere altre no.)

— tramoggia
fonte

fantastico: è anche estremamente utile per "sovraccaricare" un'app Django esistente. Voglio usare Django per il contenuto renderizzato per ottenere il SEO e usare React per l'interazione dell'utente con gli elementi DOM. Questo lo rende estremamente semplice da ottenere.

— YPCrumble

probabilmente puoi anche guardare shouldComponentUpdate e potrebbe avviare le prestazioni in futuro (probabilmente non nel tuo caso). Ecco il riferimento: facebook.github.io/react/docs/component-specs.html

— Jim,

@YPCrumble se la risposta degli hopper è corretta, contrassegnala

— Dana Woodman

E che dire del caso in cui ci sono più componenti ReactDOM.render()che devono inserire componenti nello stesso a divseconda di quale pagina si apre? In particolare, hai solo una risorsa concatenata uglified app.jsche hai <script src="app.js">in ogni pagina. E questo carica le librerie, diciamo, jQuery, Bootstrap, React e ha il tuo codice JS personalizzato e componenti React. Se visiti /foo, l'hai fatto ReactDOM.render(<Foo />, getElemById('content')). Se visiti /bar', you have ReactDOM.render (<Bar />, getElemById ('content')) `. Interferiscono. Come lo gestisci?

— Verde

@ Green Non sono sicuro di aver capito, se i componenti sono su pagine separate come potrebbero interferire? Altrimenti, perché non aggiungere un nuovo elemento contenitore per ogni componente, ad esempio:ReactDOM.render(<Foo/>, document.getElementById('content').appendChild(document.createElement('div')))

— tramoggia

Questo approccio va bene dal punto di vista delle prestazioni di caricamento della pagina, ma ci sono altri svantaggi e se possibile dovrebbero essere evitati più root di React.

Diverse radici React non possono condividere il contesto e se è necessario comunicare tra le radici React, sarà necessario eseguire il fallback sugli eventi DOM globali
Ottieni meno vantaggi dalle ottimizzazioni delle prestazioni come il time slicing - suspense e rendering asincrono. Non è possibile sospendere oltre i confini della radice di React

Più raeding - https://github.com/facebook/react/issues/12700

— Yangshun Tay
fonte